Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 2, 2020 at 5:44 pm #1257664
    NicomIT

    Is there a way to apply a color overlay to the Fullwidth Easy Slider at a specific breakpoint in the media quires? The caption isn’t readable when the slides resize, so I would like to put a white overlay at a specific opacity over them so they would be faded out and allow the text to be read. Thanks!

    November 3, 2020 at 8:58 am #1257898
    Rikard

    Hey NicomIT,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    November 3, 2020 at 4:34 pm #1258054
    NicomIT

    Sure, here you go.

    November 5, 2020 at 5:15 am #1258512
    Rikard

    Hi,

    Thanks for that. I couldn’t see any text not being readable on any resolution on my end, so I’m not sure exactly what you are looking to achieve. Could you try to explain a bit further or post a screenshot or mockup highlighting your intentions please?

    Best regards,
    Rikard

    November 5, 2020 at 3:29 pm #1258626
    NicomIT

    Hi Rikard,
    I was able to adjust things so the text was visible for the most part. But it does still get covered over a little bit in a couple instances. So it would be nice to be able to just let it resize and place an overlay on the slide images to fade them out some and allow the text to be readable on top of them.

    I included two images below. One shows a screenshot of a slide as it displays now with the text running over the slide image a little. The second shows what I am trying to do by placing an overlay on top of the image. It’s a little rough, but should give you the idea of what I am trying to do. In the image with the overlay, the text would be on top and 100%. Only the image would be faded out.

    November 9, 2020 at 3:27 am #1259156
    Mike

    Hi,
    Sorry for the late reply and thanks for the link and screenshots. I see that you are asking for an overlay, but opacity seems to work well. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 1026px) { 
#full_slider_1 > div > ul > li > div > img {
	opacity: 50% !important;
}
}

    Please adjust the media query to suit and clear your browser cache and check.

    Best regards,
    Mike

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