Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 15, 2019 at 9:15 pm #1118959
    CovenantPrep

    I’m having issues with the mobile version of the site. The background becomes a header and conceals the top of the text blocks on every page when loaded on my iPhone. This issue doesn’t appear on mobile-scaled desktop windows, as you can see in the linked photos.

    What’s causing it to become a header and overlap the articles on mobile? What’s the fix?

    Simulated Mobile on Desktop (No issue)
    How it ought to look on mobile
    Actual Mobile screenshot (overlapped text)
    How it actually appears on mobile

    • This topic was modified 6 years, 9 months ago by CovenantPrep.
    July 16, 2019 at 7:46 am #1119066
    Rikard

    Hey Chris,

    Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    July 17, 2019 at 11:17 pm #1119730
    CovenantPrep

    Hi Rikard!

    I removed all of the custom CSS on the site, and tried running only that, but to no avail. The backgrounds are still becoming a foreground element in mobile.

    Would screenshots of any particular part of the backend help you to make sense of what’s causing this error?

    July 18, 2019 at 1:51 pm #1119912
    Rikard

    Hi,

    I don’t think screenshots will help unfortunately. Could you try giving the 1/3 elements a custom class in the element option to see if that helps? You could use custom-one-third for instance, then use this in Quick CSS:

    @media only screen and (max-width: 767px) {
.custom-one-third {
    margin-top: 0 !important;
}
}

    Best regards,
    Rikard

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