JanelleNine Posted April 29, 2020 Share Posted April 29, 2020 Site URL: https://www.ninebyjanellethon.com/ Hello. I have a full width gallery slideshow in my home page, but I want the images to always run in horizontal. When in Mobile View, the slideshow width adjusts automatically (which I know is part of the responsive design), but then the images are cropped in a vertical format. I would like for these images to appear as horizontal as possible, because the images have a very wide view and would like to showcase that. (I attached both desktop and mobile view of my website) Link to comment
brandon Posted April 30, 2020 Share Posted April 30, 2020 (edited) Hi @JanelleNine. Here's a bit of code you can use to get you started. If you add other galleries to the the site and only want to target this one, you'll want to adapt the CSS a bit. .gallery-fullscreen-slideshow { height: auto !important; } .gallery-fullscreen-slideshow-list { max-height: 100vh; } Let me know how it goes for you. EDIT 7/22/2020: In some cases, for mobile, you may also need something like @media screen and (max-width: 767px) { .gallery-fullscreen-slideshow[data-height="L"] { height: auto !important; } .gallery-fullscreen-slideshow-item img { object-fit: contain !important; } } -Brandon Edited July 22, 2020 by brandon paul2009 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
JanelleNine Posted April 30, 2020 Author Share Posted April 30, 2020 Thank you Brandon!!!! it worked!!! Link to comment
JanelleNine Posted July 10, 2020 Author Share Posted July 10, 2020 (edited) For some reason it is not working anymore... @brandon Edited July 10, 2020 by JanelleNine Link to comment
JanelleNine Posted July 13, 2020 Author Share Posted July 13, 2020 @brandon Do you know why this code is not working anymore? Link to comment
Zumon Posted August 27, 2021 Share Posted August 27, 2021 Code worked for me. Thanks! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment