Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 26, 2019 at 2:10 am #1113415
    LVROZ

    Hi,

    I’m a newbie so please be gentle :)

    I love Enfold but I’m having issues with fullwidth slider text (both Caption and subtext) going off the top of background image on smaller mobile devices.

    I tried a work around creating two fullwidth sliders, one for Desktop/larger screens (hidden on small screens) and one for smaller (hidden on large screens)

    Larger Screen version looks good.

    Small Screen not so much,
    in second (small screen version) of Fullwith Slider… (copied from first and hide options changed)

    In Edit Form Element: (only attempted to do first element on welcome page as an example)
    If I use 11px font for Caption and have subtext “hidden” (set to position bottom with frame). I see 11px Caption at very top of screen.
    If I set Caption 11px and subtext at 10px, the subtext is the only thing seen at extreme top of frame and no Caption (off the page to the top). thank you.

    June 26, 2019 at 9:10 am #1113534
    Rikard

    Hey LVROZ,

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

    @media only screen and (max-width: 767px) {
.slideshow_align_caption {
    top: 0;
}
.avia-caption-title {
    visibility: visible;
}
}

    Best regards,
    Rikard

    June 26, 2019 at 9:17 am #1113538
    LVROZ

    thank you! almost!

    just needs to come down a fraction more. please check I have implemented your changes. Maybe text on both Caption and sub heading needs to be a little smaller.

    June 26, 2019 at 9:20 am #1113539
    LVROZ

    maybe both text to stretch across page a little more? thanks again

    June 26, 2019 at 7:25 pm #1113702
    Victoria

    Hi LVROZ,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:767px){
    #top .caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
        padding: 0;
    }
    .responsive #top #wrap_all .av_slideshow_full .container.caption_container {
        width: 100%;
    }
    #top .caption_bottom .slideshow_caption .slideshow_inner_caption {
        padding: 0px 25px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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