badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Switching to wide layout on mobile device only

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 6, 2017 at 10:16 am #53943
    geyjo
    Participant

    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.

    November 6, 2017 at 11:14 am #53947
    Theme Horse Support Team
    Keymaster

    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!

    November 6, 2017 at 11:59 am #53948
    geyjo
    Participant

    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.

    November 6, 2017 at 12:03 pm #53949
    geyjo
    Participant

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

    G.

    November 7, 2017 at 11:39 am #53967
    Theme Horse Support Team
    Keymaster

    @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!

    November 8, 2017 at 9:31 am #53980
    geyjo
    Participant

    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.

    November 8, 2017 at 10:45 am #53981
    Theme Horse Support Team
    Keymaster

    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
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.