Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Full Bleed Gallery Slideshow, remove stretching at large size screens


David_Ledger

Question

Site URL: https://www.shahfoundation.org/

Below my header on the home page, I have placed a Gallery Section with the gallery option type of Slideshow: Full.  I have used images sized @2500px W x 600px H with a concentrated center image area of approx. 800px x 600 px for valuable information which I would like to appear on all screen sizes especially when going down to mobile view. 

This formula seems to work well without additional CSS, however at a certain larger screen size of 3000px on 30in monitor and full screen width on 15" laptop, the images begin to stretch beyond their full size, clipping the top and bottom of the image.

I previously have been using:

.gallery-fullscreen-slideshow{
    height: 46vh!important;
}

to adjust for the clipping of the image for the specific clipping I have seen, but is there better code to keep the slideshow from clipping at these larger screen sizes with a better responsive solution?

Thanks in advance.

image.thumb.png.893d5452306da3982c9d8afee50542d7.png

image.thumb.png.71a8857ebc8b5f4ce9892cd8c63b88cd.png

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

Top of Home page, 3rd slide in slideshow.

Am currently using this code with a little better success, but would love whatever the better code would be to use.:

@media only screen and (min-width: 1500px) and (max-width: 5000px){.gallery-fullscreen-slideshow {height: 46vh!important;
  }}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...