Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 14, 2017 at 3:30 pm #838694
    zimbo

    Between 990px and 768px the spacing/formatting of the first section of “main” under the header is messed up on this website – the section “underlaps” the header and needs to be “pushed down” (on all pages) but I’ve tried various CSS solutions but cannot figure out a fix.

    Mobile menu is activated at 990px and there are no customisations to the header or menus.

    Please can you advise a fix.

    See the problem here – here and here.

    The problem resolves itself under 768px.

    August 14, 2017 at 4:35 pm #838753
    John Torvik

    Hey zimbo,

    You can add this custom code at Enfold Theme Options > General Styling > Quick CSS

    
@media only screen and (max-width: 990px) {
#top .title_container .container {
padding-top: 42px !important;
}
}

    Best regards,
    John Torvik

    August 14, 2017 at 5:48 pm #838830
    zimbo

    That didn’t work but in trying to debug why, I found the problem. Between 990px and 768px the theme sets this CSS:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 88px; }}

    which is not a large enough padding; increasing it to 115px fixes the problem.

    Given this is default theme behaviour I’d argue this could be a bug that should be reported to the dev team for investigation.

    August 14, 2017 at 7:55 pm #838917
    Nikko

    Hi,

    Glad that it’s fixed. We will look into it. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Responsive layout messed up between between 990px and 768px’ is closed to new replies.