Jump to content

Image on desktop looks wrong on mobile

Recommended Posts

  • Replies 6
  • Views 867
  • Created
  • Last Reply

Top Posters In This Topic

6 minutes ago, AnnaRadzicki said:

I uploaded a picture...into additional info. section, but when I switch my view to mobile, it looks terrible

I would encourage you to add these icon+text elements individually as HTML (preferred), or at least as individual images, so they will be responsive and wrap onto multiple rows when the screen width is small, instead of shrinking.

If you do use images, I recommend that you add some alt text to them because they currently lack this descriptive text for SEO and users with visual disabilities.

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
6 minutes ago, paul2009 said:

I would encourage you to add these icon+text elements individually as HTML (preferred), or at least as individual images, so they will be responsive and wrap onto multiple rows when the screen width is small, instead of shrinking.

If you do use images, I recommend that you add some alt text to them because they currently lack this descriptive text for SEO and users with visual disabilities.

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

If i upload these individually, would I still input them into additional info? Would there be a code needed to have them look how they are currently on desktop, but have multiple rows for mobile? I appreciate your help!

Link to comment
3 hours ago, AnnaRadzicki said:

If i upload these individually, would I still input them into additional info?

I'm assuming that you added the single image (containing all the icons) in an Image Block?

If you did, you can simply add more Image Blocks and place them side by side, then add one icon to each block.

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
1 hour ago, paul2009 said:

I'm assuming that you added the single image (containing all the icons) in an Image Block?

If you did, you can simply add more Image Blocks and place them side by side, then add one icon to each block.

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

Maybe I am just confused, but when i add more image blocks they are stacked on top of each other not side by side? 

Link to comment
On 9/9/2024 at 8:06 PM, AnnaRadzicki said:

when i add more image blocks they are stacked on top of each other not side by side? 

You should be able drag each image block so they appear beside each other, like this:

image.gif.41615be8f2c9c1366c29a950872acf42.gif

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 2 weeks later...

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.