-
Posts
-
I have an image that I need to be responsive in advanced layer slider, but it isn’t working well. The image quickly shrinks when resized, but the container stays larger than the image. Is there a way to match the size of the container with the size of the image when responsive?
Hey mgyura,
Thank you for using Enfold and sorry for the late response.
In the layer slider settings, try to remove the Layers Container value. This container constrains the layers on a certain screen width. Or use the Color Section element of the advance layout builder, add the image as background. You can also add an image element inside a color section then adjust its position property to absolute and the specify its top and left position.
Best regards,
IsmaelThank you for your help, Ismael. I removed the Container value and that did not work. Using the color section does not work either because it is not responsive. The picture moves out of frame on responsive devices. We also need layers to add on top of the image for this purpose. I am really trying to find a solution in the Layer Slider because of all the features it has.
Hi,
The color section is responsive, the image moves out of the frame because the section is trying to keep its aspect ratio. It’s possible to adjust the background position on certain screen sizes using css media queries. If you really want to use the layer slider, please extract the “girl” or remove the extra background on the right side of the image then set the top position according to the height of the slider and the “girl” image while set the left position to 0. If it’s not working, add a custom attribute to the “girl” layer then adjust the top and left position in the Quick CSS field.
Best regards,
Ismael
- You must be logged in to reply to this topic.