Jump to content

Fixed Image Gallery Blocks to not scale on mobile

Recommended Posts

Site URL: https://rockcreek-church-new.squarespace.com/config/design

Hello! 

I need help getting my gallery block images that I'm using for custom social link icons to stay the same size on mobile and not get huge. Right now when you go to mobile view it will be HUGE and I need them to stay small. I'm using gallery block because we have more than just social icons we have an email and phone icon etc. It's for a church I'm doing their site and they HAVE to have that at bottom. I would love to know how to customize with code to get any image gallery block to stay same size as well as code to make it a certain size as well if needed.

Password to view the site is : RC2020.

Thanks!

Brandon

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply
  • 1 month later...

@tuanphan this is happening to me as well on my Squarespace 7.1 template Chotto. I have gallery blocks on my site that looks great but when I view on mobile it crops the images to fit on screen instead of having the image just scale down.

I was doing my research and found this CSS code but it doesn't seem to work on my template.

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 640px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Resizing Gallery Blocks

.sqs-block-gallery {
width: 70%;
margin-right: auto;
margin-left: auto;
}

Link to comment
9 hours ago, ChingKong said:

@tuanphan this is happening to me as well on my Squarespace 7.1 template Chotto. I have gallery blocks on my site that looks great but when I view on mobile it crops the images to fit on screen instead of having the image just scale down.

I was doing my research and found this CSS code but it doesn't seem to work on my template.

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 640px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Resizing Gallery Blocks

.sqs-block-gallery {
width: 70%;
margin-right: auto;
margin-left: auto;
}

Can you share link to page where you insert gallery block?

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
On 4/11/2020 at 2:21 PM, sophie.murfitt said:

This is also happening on my website but with general images.

The mobile version means the images are coming up huge. 

https://vuvuzela-crow-75we.squarespace.com/

pw- totalhealth

Can you share link to page where you use Gallery Block?

16 hours ago, ChingKong said:

You mean gallery reel under header? Looks good here

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
  • 6 months later...
On 4/10/2020 at 1:13 PM, ChingKong said:

@tuanphan this is happening to me as well on my Squarespace 7.1 template Chotto. I have gallery blocks on my site that looks great but when I view on mobile it crops the images to fit on screen instead of having the image just scale down.

I was doing my research and found this CSS code but it doesn't seem to work on my template.

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 640px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Resizing Gallery Blocks

.sqs-block-gallery {
width: 70%;
margin-right: auto;
margin-left: auto;
}

Did you find an answer to this problem? I'm trying the same code with no luck. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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