Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 10, 2024 at 7:25 pm #1433939
    bemodesign

    The header on all Blogs gets cut off. Can I get a code to adjust all of these? Thanks

    February 11, 2024 at 11:51 am #1433979
    Rikard

    Hey bemodesign,

    I’m not sure if I can see the problem on my end. Could you post a screenshot highligting the problem please? Also please let us know in which browser you are seeing it in.

    Best regards,
    Rikard

    February 12, 2024 at 11:33 pm #1434124
    bemodesign

    It’s on Mobile view. The header gets cut off.

    February 13, 2024 at 5:38 pm #1434192
    bemodesign

    screenshot

    February 14, 2024 at 5:59 am #1434252
    Ismael

    Hi,

    Thank you for the update.

    Have you added the following css code? It removes the padding above the main container, causing the header to overlap with the heading.

    .responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
}

    You can override it by adding this css code.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 100px !important;
  }
}

    Best regards,
    Ismael

    February 14, 2024 at 6:23 am #1434254
    bemodesign

    Thanks! done!

    February 14, 2024 at 12:15 pm #1434285
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    February 15, 2024 at 6:27 am #1434365
    bemodesign

    Wait, I had to take that code off, because it made a space on all the mobile pages. I just needed the Blog pages adjusted. Did you see that link? https://drive.google.com/file/d/16cOVLA62oSIYmc38xDluQMaPyNt0Ao_c/view?usp=sharing

    February 15, 2024 at 11:55 am #1434389
    Rikard

    Hi,

    Please try this CSS instead:

    @media only screen and (max-width: 767px) {
  .single-post #main {
    padding-top: 100px !important;
  }
}

    Best regards,
    Rikard

    February 24, 2024 at 11:37 pm #1435330
    bemodesign

    I have this same issue with another website that is similar to this one. All the “regular pages”, “blog” and “products” that don’t have “transparent header”, get cut off at the top ON Mobile view. The home page looks great, but I need all the other pages to not have the top get cut off. Any CSS for this?

    see screenshot

    February 24, 2024 at 11:45 pm #1435332
    bemodesign

    Just to add a note, these issues are just on Mobile view. If I have a page that uses Transparent Header, it looks fine, but not all my pages will have this. See attached link for a page that has transparent header.

    • This reply was modified 10 months ago by bemodesign.
    February 26, 2024 at 9:55 am #1435403
    Ismael

    Hi,

    You can add this css code to adjust the top padding of the main container based on the header layout.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */

  .responsive #top #main {
    padding-top: 88px !important;
  }

  .response.html_header_transparency #main {
    padding-top: 0 !important;
  }
}

    This should apply an 88px top padding on pages with header transparency disabled.

    Best regards,
    Ismael

    February 29, 2024 at 12:56 am #1435820
    bemodesign

    thanks, looks like that worked

    February 29, 2024 at 10:19 am #1435847
    Ismael

    Hi,

    Great! Glad to know that the suggestions worked. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘enfold adjust height of header on blog’ is closed to new replies.