Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #464176

    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?


    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,


    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?



    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%;



    That didn’t seem to be working.



    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,


    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.



    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.



    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!

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