Fixed Image Gallery Blocks to not scale on mobile

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

RC2020.

Incorrect password

RC2020 is the correct password. Try again 😉

On 3/1/2020 at 9:25 AM, BCCreativeMedia said:

RC2020 is the correct password. Try again 😉

getting my gallery block images that I'm using for custom social link icons

Can you take screenshot? I didn't see..

@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;
}

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?

13 hours ago, tuanphan said:

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

@tuanphan https://www.chinadynastyatx.com/menu

password: CD78748

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:

@tuanphan https://www.chinadynastyatx.com/menu

password: CD78748

You mean gallery reel under header? Looks good here

17 hours ago, tuanphan said:

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

You mean gallery reel under header? Looks good here

@tuanphan Yeah on my mobile it crops the image instead of keeping the original aspect ration and just down sizing it.

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. 

On 10/17/2020 at 1:28 AM, AudreyWhelan26 said:

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

If you share link to gallery. We can check easier

18 hours ago, tuanphan said:

If you share link to gallery. We can check easier

audreywhelancreative.com/home-secret

On 10/22/2020 at 3:55 AM, AudreyWhelan26 said:

audreywhelancreative.com/home-secret

Hi. Where is slide? I don't see any on above link :(