Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 13, 2017 at 6:58 pm #746568
    sudhafen

    My easy slider looks good on a normal screen but when it’s viewed on a smartphone the text color doesn’t show very well anymore so I want to use the overlay function only in the responsive site. Is there some kind of css I can hide the overlay div with only on regular screens so it only shows in responsive design? Or some CSS/code which will add an overlay div only in responsive design?

    February 14, 2017 at 10:12 pm #747136
    Nikko

    Hey sudhafen,

    Can you post a link to the page mentioned? you can post the details in private content when you reply.

    Best regards,
    Nikko

    February 15, 2017 at 12:42 pm #747440
    sudhafen

    Here you are Nikko.

    February 16, 2017 at 7:27 am #747810
    Rikard

    Hi,

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

    @media only screen and (max-width: 767px) {
.slideshow_align_caption h2, .slideshow_align_caption .avia-caption-content av_inherit_color {
    padding:10px;
    background: rgba(255, 255, 255, 0.8);
}
}

    Best regards,
    Rikard

    February 16, 2017 at 12:29 pm #747918
    sudhafen

    Thanks Rikard but this only adds a background to the H2. Not the caption. I tried adding p after slideshow_align_caption but this doesn’t work either.

    But what I want is this 0.8 white background over the easyslider on mobile devices.

    February 21, 2017 at 7:02 am #749747
    Ismael

    Hi!

    Please insert the following css code inside the css media query above:

    .avia-caption-content {
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
}

    Cheers!
    Ismael

    March 31, 2017 at 10:44 am #769855
    sudhafen

    Thanks. This works.

    But still, my original question was if I could get a 0.8 white background on the entire easyslider on mobile devices so the H2 and content are better to read.

    April 1, 2017 at 3:46 pm #770337
    Victoria

    Hi sudhafen,

    Here is the code you can put this 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) {
.caption_fullwidth.av-slideshow-caption.caption_left {
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

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