Jump to content

Adjust gallery width in mobile view

Recommended Posts

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

Link to comment

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;


Edited by brandon

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

Link to comment
  • 2 months later...
  • 1 year later...

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.