Jump to content

Gallery: Reel Displaying odd on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hello Everyone,

My client has a Gallery, Slideshow: Reel block on the homepage of her site that displays logos of clients she has worked with. It looks great and functions well on desktop, but on mobile the images are all tiny at the top of the block (see 'Unaffected Block.png'). I added this code to the custom CSS to fix it:

@media screen and (max-width:767px) {
  .gallery-reel {
    height: 30vh !important;
  }
    .gallery-reel-item {
    height: 20vh !important;
  }
}

It looks great on the site builder's mobile preview (see 'Mobile Preview with Code.png'), but when I look at the live site on my phone the logos disappear (see 'Live Mobile with Code.png').

I waited 48 hours to see if it was just taking time to process the changes on the live site, but checked back today and it still isn't looking right.

Any suggestions on how to fix this?

Thank you!

Coco

Unaffected Block.png

Mobile Preview with Code.png

Live Mobile with Code .PNG

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Try remove this code

@media screen and (max-width: 767px) {
    .gallery-reel {
        height:30vh !important
    }

    .gallery-reel-item {
        height: 20vh !important
    }
}

and add this new code

@media screen and (max-width: 767px) {
    [data-section-id="62d5935faf622577b1cb576c"] .gallery-reel {
        height:15vh !important;
        padding: 0 !important;
    }
    [data-section-id="62d5935faf622577b1cb576c"] .gallery-reel-list {
        position: absolute !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks 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.