Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
BCCreativeMedia

Fixed Image Gallery Blocks to not scale on mobile

Question

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

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
Posted (edited)
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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...