Jump to content

Display images full width in mobile view

Recommended Posts

Site URL: https://disc-snail-sk6j.squarespace.com









I'm still having issues with how my images appear when viewing the site in mobile.

Desktop: shows my first image of four icons exactly how I intend.

Mobile: Crops heavily into the first image so only two icons are visible.

Question: Can I use any CSS to make a site wide change so that mobile view displays my images full width?

Screenshot 2022-04-05 at 13.03.06.png

Screenshot 2022-04-05 at 13.03.19.png

Link to comment

Update. I managed to solve the problem by using this text from another forum post:

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
.ProductItem-gallery-slides:before {
    padding-bottom: 1% !important;
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;


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...

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.