[geyjo]

Hi There.

I am new to WordPress (I have a strong computer background though) and I started using interface a few weeks ago.
I am looking for a way to have the “narrow layout” when the site is viewed on a computer and a “wide layout” when viewed on a mobile device.
Is there any way to achieve this?

Thanks to whoever can help that.

Cheers

G.

[Theme Horse Support Team]

HI geyjo,

Go to Appearance -> Customize -> Design options -> Custom CSS and paste the below CSS code and Click on Save & Publish button at the top of the options panel.

@media only screen and (max-width: 767px) {
   .narrow-layout .wrapper {
       width: 100%;
   }
   .narrow-layout .container{
       padding : 0 15px;
   }
}

Thank you!

[geyjo]

Thank you very much for your quick help.

It works but not totally as expected.
The text spreads on a narrower width than with the wide layout.
Do you know what parameter to tweak to adjust this?

Thanks.

G.

[geyjo]

I just added
width: 90%; in the .container section.
It seems to work. Is it the right way to go?

G.

[Theme Horse Support Team]

@geyjo please use below custom css.

@media only screen and (max-width: 767px) {
   .narrow-layout .wrapper {
       width: 100%;
   }
   .container,
   .narrow-layout .container{
       padding : 0 15px;
   }
}

Thank you!

[geyjo]

Thank you for this suggestion.

It still does not get as wide as the wide layout (and as with the additional width: 90% I put).
I did not see any major side effect so far with the additional width: 90%.
This does not mean I won’t eventually.

[Theme Horse Support Team]

Hi @geyjo,

You can try using the 90% as well. Use the below custom css for it.

@media only screen and (max-width: 767px) {
   .narrow-layout .wrapper {
       width: 100%;
   }
   .container,
   .narrow-layout .container{
       width: 90%;
   }
}

[Author]

Posts