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

10 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 building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

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?


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

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
  • 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!

Share this post


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

How to Setup Password & Share URL  Squarespace Customer Care

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