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

Photo resizing on mobile


alceryes

Question

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!

Edited by alceryes
Initial Revision
Link to comment

17 answers to this question

Recommended Posts

  • 2

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


I post free answers because I want to help fellow Squarespace users - I'm not selling anything. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 2

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

codecss.jpg.d3af15d062a1d0b385bd581e2b5ae169.jpg

Edited by tylerrichardwells
Initial Revision
Link to comment
  • 1

Should be something like:


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

alt text

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

bildschirmfoto-2016-07-21-um-154550.png.28ba0dfe1108a7cf69653a737e786270.png

Link to comment
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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.

Edited by alceryes
Link to comment
  • 0

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.alt text

codecss.jpg.d3af15d062a1d0b385bd581e2b5ae169.jpg

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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

Screen Shot 2020-11-30 at 5.57.30 pm.png

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

Screen Shot 2020-11-30 at 5.57.30 pm.png

If make larger, they will be ugly..

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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:

image.thumb.png.c11c559045708904b809179456de9657.png

 

 

fyi - this is what the squirrel should look like

image.thumb.png.0d39ea64281e09711cc168fe77a536c8.png

 

thanks!

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

image.thumb.png.c11c559045708904b809179456de9657.png

 

 

fyi - this is what the squirrel should look like

image.thumb.png.0d39ea64281e09711cc168fe77a536c8.png

 

thanks!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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