I want my images to shrink when they are displayed on a mobile phone

My client has requested this picture but this along with a few others is disorted when viewed on a mobile device. 

34 minutes ago, Armagh2022_23 said:

My client has requested this picture but [it] is distorted when viewed on a mobile device. 

It is likely to be cropped for mobile devices, so you'll probably want to add some custom CSS to fix the height so the entire word is visible. If you'd like help with this, please post a working link (a “URL”) to the site. This will allow us to see the issue and test solutions. If you are unsure how to do this, my advice in How to Post a Forum Question provides some detail.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi this is the live link of the website

https://www.theautismhive.com/

Is there a bank of custom CSS I was searching online and i got the photos to rotate on the meet us section but a similar issue when viewed of a mobile device look disorted.

Hi sorry havent got a response i found this online but doesnt seem to have made a difference really

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {.sqs-block-image {
  width: 50%;
  margin: 0 auto;
}
}

/* CSS FOR MOBILE */
@media @mobile {.sqs-block-image {
  width: 50%;
  margin: 0 auto;
}
}

On 6/9/2023 at 2:21 PM, paul2009 said:

It is likely to be cropped for mobile devices, so you'll probably want to add some custom CSS to fix the height so the entire word is visible. If you'd like help with this, please post a working link (a “URL”) to the site. This will allow us to see the issue and test solutions. If you are unsure how to do this, my advice in How to Post a Forum Question provides some detail.

Did this help? Please give feedback by clicking an icon below  ⬇️

On 6/12/2023 at 4:31 PM, Armagh2022_23 said:

when viewed of a mobile device look disorted.

Can you clarify what you mean by "distorted"? When I view it, the image is cropped (which is the Squarespace default). Are you seeing something else?

On 6/15/2023 at 4:05 PM, paul2009 said:

Can you clarify what you mean by "distorted"? When I view it, the image is cropped (which is the Squarespace default). Are you seeing something else?

Hi So i cant see the fill of the picture ideally what id like is for the picture to become smaller whilst on a mobile. 

If you click on the meet our team on a mobile device it in particular becomes disorted.

https://www.theautismhive.com/team-4

44 minutes ago, Armagh2022_23 said:

If you click on the meet our team on a mobile device it in particular becomes distorted [on mobile]

As you're using Squarespace's newest design tool called Fluid Engine (FE) you need to create two layout designs: one for desktop, and one for mobile devices. The mobile version will use the same content, but you need to arrange and resize the mobile content independently of the desktop layout. 

If you click the mobile button (in the top-right corner of the preview pane) you'll see the mobile device preview. Tip: If you have made changes to the desktop layout and haven't edited the mobile layout, it will have a blue dot to indicate that some adjustments may be required to the mobile layout.

For more detail, see Editing your site with Fluid Engine.

Alternatively, if you do not want to layout the page specifically for mobile you can build pages using the "Classic" editor instead. To learn more about the differences between Fluid Engine and the classic editor, see the guide Fluid Engine vs. classic editor. 

Does this help?

Did this help? Please give feedback by clicking an icon below  ⬇️