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

Photo resizing on mobile

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

Share this post


Link to post

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


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


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

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