Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 11, 2016 at 1:20 am #610885
    bobfurgo

    Hello! I was wondering if it was possible to have a boxed layout but only past a certain width similar to http://www.uber.com/

    The site is full width on laptop screens, but on desktop it is boxed.

    Thanks!

    April 11, 2016 at 5:04 am #610938
    Vinay

    Hi peanuttario!

    Yes this is very much possible in Enfold with just 2 easy steps :)

    Please select boxed layout from Enfold > Layout Options
    and select the dimensions

    Regards,
    Vinay

    April 11, 2016 at 8:16 pm #611512
    bobfurgo

    I entered 1700px in the dimensions but the boxed layout still appears when viewing the site on laptop and all other devices that have screens smaller than 1700px.

    What i’m wondering is if we can use this setting strictly for desktop screens. When looking at the uber site, notice that it is full width on laptop but boxed on desktop to prevent the site from stretching too far – this is what i’m trying to accomplish.

    Thank you!

    April 14, 2016 at 5:14 am #613442
    Ismael

    Hi!

    Set the theme layout to “boxed’ then add this in the Quick CSS field:

    @media only screen and (max-width: 1700px) and (min-width: 768px) {
.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header, .responsive.html_boxed.html_header_transparency #top #header {
    max-width: 100%;
}
}

    Best regards,
    Ismael

    April 14, 2016 at 7:55 pm #614227
    bobfurgo

    Hi Ismael! That worked great! Thank you very much! Is it possible to change the background color and/or add a background image to the boxed area?

    April 15, 2016 at 1:47 am #614457
    Yigit

    Hey!

    Please go to Enfold theme options > General Styling > Body Layout and change background color/image as needed

    Best regards,
    Yigit

    April 20, 2016 at 1:45 am #617839
    bobfurgo

    Got it. Thank you for that, didn’t see that option.

    I do have a question though, I have the boxed layout set to 2000px:

    @media only screen and (max-width:  2000px) and (min-width: 768px) {
.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header, .responsive.html_boxed.html_header_transparency #top #header {
    max-width: 100%;}
}

    but for some reason it still looks like certain elements are stretching past the 2000px mark on desktop when you maximize the screen, see link below. How can I make it so that all elements are contained within the specified width?

    April 22, 2016 at 11:39 am #619778
    Andy

    Hi!

    about which elements are you talking about? link you have provided looks good to me. Can you highlight using screenshots please? use imgur.com or dropbox.

    Cheers!
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.