Hi there,
On the URL in the private content, you’ll see our home page slider. It displays well on monitors up to 1280 px wide, but above that it continues to attempt to stretch the image to fit the larger monitors’ 100% width, and of course the images just blow apart in terms of quality when enlarged.
Turning OFF “stretch image to full width” on the slider settings works fine for the larger monitors, but takes the fullwidth-ness away from the smaller monitors too, leaving a gap left and right. (if you have the ability to see it widescreen and regular, you’ll see what I mean) We’d like it to stretch fullscreen on monitors up to 1280 or so, and then just take the width of the rest of the page on monitors above that. Unsure how to even do that.
Is there CSS that will help me to have the best of both worlds? To look good full-width on regular monitors, but NOT stretch the image full width on screens 1280+ pixels in width, but only take up the same width footprint as the rest of the site? Perhaps something with a max-width?
Scratching my head over this one.
Thanks,
M
Hi mterrian!
Thank you for using Enfold.
You can add this to the Quick CSS field to define the width of the full screen slider on larger screens:
@media only screen and (min-width: 1280px) {
div#full_slider_1 {
width: 1280px;
margin: 0 auto;
}}
Regards,
Ismael
Ismael, thank you.