Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 31, 2016 at 11:25 pm #667067
    Brad

    Hi,

    I’ve noticed that when a page is loaded on mobile, and that page uses a fullscreen slider with title/caption/button content (“content” for short), that content is sometimes pushed up into the header area where it overlaps with the logo or menu, which is undesirable.

    I’ve attached two screenshots showing the page on the desktop, and the same page on mobile (with the overlap problem visible where the “Get the shirt” title is bumped up to the header area and under the pancake menu).

    What would be better is to have the content pushed down by an amount equal to the header height plus some margin|padding—but only in situations where the screen or window height would cause this effect to happen. What’s the easiest way to fix this?

    Thanks!

    August 4, 2016 at 1:45 pm #668565
    Yigit

    Hey Brad,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
.avia-fullscreen-slider .caption_container {
    margin-top: 100px!important;
}}

    Best regards,
    Yigit

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