Jump to content

Can I "fit" images on desktop and "fill" on mobile?

Recommended Posts

Site URL: https://www.kierstenamelia.com/starbucks-pattern-library

I'm running into some frustrating issues with my scaling across desktop and mobile. My images are sized well to the grid on desktop..

Screen Shot 2022-08-15 at 10.42.36 AM.png

...but they don't scale nicely onto mobile:

Screen Shot 2022-08-15 at 10.43.19 AM.png

This is leading to some really weird and frustrating padding issues on mobile, where it's nearly impossible to get my spacing to be consistent. Unfortunately, "filling" the image isn't a great solution — because that leads to the image content getting cropped and moving off screen at some breakpoints. (I'm doing that for now but don't like it!)

Is there some way to resolve this? Ideally the images could snap to the grid, and that grid would scale nicely across tablet and mobile. As a product designer, it's kind of a nightmare for my portfolio to look so buggy on mobile (and tablet is rough too). Would love any advice about this! 

Edited by kierstenamelia
Link to comment
  • 2 months later...
On 8/17/2022 at 10:15 PM, tuanphan said:

With Fluid Engine, you can edit page > Click Mobile icon on top right to adjust layout on mobile. This won't affect desktop.

That's not true. Same issue here. I have an image block set as FILL on mobile. I want it to FIT on Desktop. Changing from FILL to FIT on mobile also changes its settings on Desktop. Please advise.

Link to comment
9 hours ago, adamfriedman21 said:

I have an image block set as FILL on mobile. I want it to FIT on Desktop.

You can specify a different size or position on the mobile layout but the other settings like Fill/Fit affect the element in both layouts. A workaround (although not ideal) is to add two images and set one to Fill and the other to Fit. You can then resize the unwanted element in each layout to 'hide' it.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.