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

Photo resizing on mobile


alceryes
Go to solution Solved by paul2009,

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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 s

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 .

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 wo

Posted Images

13 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, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 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 post
  • 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 post
  • 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, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

Create an account or sign in to comment

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


×
×
  • Create New...