Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 19, 2022 at 1:30 pm #1352308
    whdsolutions

    We need the color section on mobile to meet with the top of the screen (under the logo and menu)
    We did some changes to get the desktop version to view correctly and I don’t want to change the desktop version as the client has signed that off.
    Really hope you can shed light on this for us.

    May 19, 2022 at 4:07 pm #1352328
    Rikard

    Hey whdsolutions,

    Did you add this CSS?

    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 211px !important;
}

    If so then please try to remove or adjust it.

    Best regards,
    Rikard

    May 20, 2022 at 10:26 am #1352398
    whdsolutions

    We need that to make the desktop version work – is there not a way to make mobile only have

    padding-top: -211px !important;

    • This reply was modified 2 years, 6 months ago by whdsolutions.
    May 20, 2022 at 12:16 pm #1352413
    Mike

    Hi,
    Thanks for the link to your page, please try wraping that rule in a media query like this:

    @media only screen and (min-width: 767px) { 
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 211px !important;
}
}

    this should correct for mobile because you already have a mobile padding of zero in your css rules:

    @media only screen and (max-width: 767px) {
.responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
}
}

    After applying the css, please clear your browser cache and check.
    If you are testing with Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    May 20, 2022 at 1:59 pm #1352420
    whdsolutions

    I have done all this but can’t see any change.

    May 20, 2022 at 3:32 pm #1352428
    Guenni007

    always the same question: do you really mean mobile devices – or small screens?
    Can I see the page it’s about?

    The reason why I ask the question is that Enfold sets certain classes to html tag that on the one hand differ between mobile or desktop device, and then even take into account the browser that is accessing. So you could create your own rules e.g. for Safari.

    May 20, 2022 at 5:57 pm #1352440
    Mike

    Hi,
    I see that you have added the css that I suggested above with the media query, but your original css is also still there causing a conflict:

    
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 211px !important;
}

    please remove this if you have not, if you have removed it then please disable your Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and then clear your browser cache and check again, because the original rule is still in the merged css.

    Guenni007 this is a good tip thank you, and this is true thanks.

    Best regards,
    Mike

    May 21, 2022 at 6:32 am #1352477
    Guenni007

    f.e.: if you open a page on mobile device e.g. iphone there will be two classes on html tag:
    avia_mobile avia-safari

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