Jump to content

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

Recommended Posts

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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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

Link to comment
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  ⬇️

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

Link to comment
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?

image.thumb.png.27d65c66a0cb1fcc9ea6fc09ad171bef.png

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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?

image.thumb.png.27d65c66a0cb1fcc9ea6fc09ad171bef.png

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

Link to comment

 

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]

image.thumb.png.e263f9fdee6cac2c4f23fc15b9f31be4.png

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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.