Photo resizing on mobile

I have a couple testimonial pictures (head shots) that are the perfect size when viewed on a computer screen but are huge when viewed on mobile devices. Is there a way to keep those photos a certain size when the page is viewed on mobile devices?

Thanks!

It depends on how they are positioned. Can you post a link to the page?

Thanks Paul. The site is ccrunlimited.com.

Thanks Paul. The site is ccrunlimited.com.

Should be something like:

#block-yui_3_17_2_32_1465063557363_8269 { max-width: 300px !important}

added to Custom CSSYou can use the web-console to find out the ID of the specific blog you want to add a max width

Hi

Try adding this to Design > CSS:

#collection-573ca1a67c65e4bc1c012206 {          /*only apply to ABOUT page on this site */
@media screen and (max-device-width: 640px) {
 .sqs-block-content .image-block-outer-wrapper  {
    width: 50%;
    height: 50%;
    margin: auto;        
   }
}
}

The first (and last) line make it only apply to the About page on your site. It references the collection ID, which is a unique reference for every page on the Squarespace system.

The second line means that it will only apply when the browser width is reduced to 640 pixels, at which point there is one column (in this template).

The rest of the code reduces the size of the headshots and centres them across the page.

This will affect all images on the page, including the first image in which you have embedded text. I've assumed you'll remove this. It's always better to add text as text as it can become too small to read on a mobile.

Paul

To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer. You'll find some more Squarespace tips on our website.

Thank you both for your answers. Ideally, I'd like to retain the embedded text in picture and just keep the 2 testimonial pictures small. I'm going to try out ArminB's answer to see if I can get it working.

Edit - Hmmm, I can't seem to get ArminB's solution working. Any suggestions? Gonna keep trying.

Edit 2 - I found a very simple way to do this as long as you have a large image to work with. It turns out that I can drastically reduce the image size using edit - edit image, without affecting how it displays on the web. Squarespace won't automatically blow up images so I just had to make them smaller than the resolution of the mobile device.Once I got below ~150px they did start to get smaller on a FHD screen but they still look fine, and, most importantly, they now look great on mobile devices.

I had a similar issue but with icons I wanted to remain a certain size on mobile. I ended up using the Code block instead of Image Block and gave it a Class. I uploaded the file to the Custom File Manager, and then used that link in the following code:

<img src="https://static1.squarespace.com/ <your image link>.jpg" class="c4icons">

I then added the CSS below to control that class (I wanted it centered as well) - when in desktop view the image wasn't larger than what I wanted it to be in the mobile view, so I put what I wanted as the max size in mobile.

.c4icons {
   width: 100%;
   max-width: 75px !important;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Here's an example of two icons, the top one with what I just described, and the bottom one using the image block which was showing the image too large on mobile.

Can someone clarify how I get the image link? How do I upload an image to the custom style manager without making a link?

Hi, I am trying to adjust specific sections within a portfolio sub-page on 7.1. The only element in the section is a single full-bleed image. The problem is that instead of a 'collection-id' being listed at the top of the big blue copy block, there is only an 'item id'. Is there CSS for adjusting this? Thanks in advance!

8 hours ago, NestofSpies said:

Hi, I am trying to adjust specific sections within a portfolio sub-page on 7.1. The only element in the section is a single full-bleed image. The problem is that instead of a 'collection-id' being listed at the top of the big blue copy block, there is only an 'item id'. Is there CSS for adjusting this? Thanks in advance!

You can try item id. It it doesn't work, you can share link to sub page, I can take a look

On 3/23/2018 at 7:44 PM, tylerrichardwells said:

I had a similar issue but with icons I wanted to remain a certain size on mobile. I ended up using the Code block instead of Image Block and gave it a Class. I uploaded the file to the Custom File Manager, and then used that link in the following code:

<img src="https://static1.squarespace.com/ <your image link>.jpg" class="c4icons">

 

 

I then added the CSS below to control that class (I wanted it centered as well) - when in desktop view the image wasn't larger than what I wanted it to be in the mobile view, so I put what I wanted as the max size in mobile.

.c4icons {
   width: 100%;
   max-width: 75px !important;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

 

 

Here's an example of two icons, the top one with what I just described, and the bottom one using the image block which was showing the image too large on mobile.

Thanks for this and sounds like exactly what i'm looking for. I'm new to coding though so would you mind sharing how you uploaded the images and assigned it a class? Much appreciated!

On 9/5/2020 at 4:19 AM, Parley said:

Thanks for this and sounds like exactly what i'm looking for. I'm new to coding though so would you mind sharing how you uploaded the images and assigned it a class? Much appreciated!

Can you share link to your site? We can give the code to resize photo on mobile

So have a similar problem: I've used the above code to make the logo in the first page of the index smaller. But the right hand horizontal line of the box keeps disappearing. I have no idea why.... 

website is bespokeconditioning.co.uk

@media screen and (max-width:640px) {

  #block-yui_3_17_2_1_1585916490171_9119 {
width: 80% !important;
    left: -10% !important;
margin: 0 auto;
} }

On 5/28/2020 at 1:23 PM, tuanphan said:

You can try item id. It it doesn't work, you can share link to sub page, I can take a look

Hi @tuanphan can you help me with my squarespace mobile image size?

I want it to appear larger on mobile. please help.

here's the link:

merchpro.co

thanks in advance

On 11/30/2020 at 5:47 PM, Asiya said:

Hi @tuanphan can you help me with my squarespace mobile image size?

I want it to appear larger on mobile. please help.

here's the link:

merchpro.co

thanks in advance

If make larger, they will be ugly..

Hi - I'm trying this too!

I'm using this code for my squirrel image: 

@media screen and (max-width:640px) {

  #yui_3_17_2_1_1609273271198_420 { 
    
width: 60% !important; 
    height: 100% !important; 
margin: 0 auto;
} }

to try and make it so that my squirrel stays small on mobile view

when I fiddle with the custom CSS, adjusting the width is having a visible effect, but adjusting the height isn't... any advice on my syntax??

as you can see below, the width is adjusted, but the height stays the same:

fyi - this is what the squirrel should look like

thanks!

16 hours ago, hlzcp said:

Hi - I'm trying this too!

 

I'm using this code for my squirrel image: 

 

@media screen and (max-width:640px) {

  #yui_3_17_2_1_1609273271198_420 { 
    
width: 60% !important; 
    height: 100% !important; 
margin: 0 auto;
} }

 

to try and make it so that my squirrel stays small on mobile view

when I fiddle with the custom CSS, adjusting the width is having a visible effect, but adjusting the height isn't... any advice on my syntax??

 

as you can see below, the width is adjusted, but the height stays the same:

 

 

fyi - this is what the squirrel should look like

 

thanks!

If you share link to page in screenshot, we can help easier