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

Adjust gallery width in mobile view

Question

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)

Desktop View.png

Mobile View.png

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1
Posted (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 by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...