Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 24, 2015 at 4:19 pm #464176
    enzowillemstad

    When the browser window is dragged smaller. I would like to switch to the mobile/tablet layout (full width Including the menu switch to hamburger-button.) sooner, around 1175px. Is that possible? I found a topic about the menu changing avia.js (seems a bit old didn’t work) and a different topic about changing grid.css. It changed the content layout, but not the boxed to full width layout.

    Could you please guide me in the right direction?

    June 24, 2015 at 4:25 pm #464179
    Yigit

    Hi enzowillemstad!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}

    and change 1024px value to 1175px

    Best regards,
    Yigit

    June 24, 2015 at 4:49 pm #464200
    enzowillemstad

    Yes, It works. thanks!

    I would be nicer if the margin of the “boxed”-bit would scale down when dragging the browser window smaller.
    Around 1300px wide, the margins on both sides remain 70px and the container scales till around 990px than the margins will disappear and the website becomes full width.

    I guess what I’m asking: Is it possible to drag the browser till the margins (boxed) are 0px and then scale the website as if it were full width?

    June 24, 2015 at 4:54 pm #464202
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    Cheers!
    Yigit

    June 24, 2015 at 4:58 pm #464207
    enzowillemstad

    That didn’t seem to be working.

    June 25, 2015 at 9:17 am #464454
    Ismael

    Hi!

    Works fine on our end. Please remove browser cache then resize your browser to less than 1300px. The layout should be full width by then.

    Best regards,
    Ismael

    June 25, 2015 at 9:37 am #464472
    enzowillemstad

    Really? That’s weird. I’ve tried several browsers. (chrome, safari, firefox) I even installed a new browser (Opera)
    The website still doesn’t go full screen until I scale the browser down to 990px.

    June 26, 2015 at 9:18 am #464805
    Ismael

    Hi!

    Alright. Please try to replace the code with this:

    @media only screen and (max-width: 1300px) {
.responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header {
  width: 100% !important;
  max-width: 100% !important;
}}

    If it doesn’t work, post the login details here so that we can check it.

    Regards,
    Ismael

    June 26, 2015 at 9:24 am #464811
    enzowillemstad

    Yes, that worked perfectly! My apologies for my pore code skills.
    Thanks for the excellent support. One of many reasons Enfold is my number one theme!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Boxed layout switch to mobile layout sooner’ is closed to new replies.