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
  • Created
  • Last Reply

Top Posters In This Topic

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 :(

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.