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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and 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 a Squarespace Domain

Link to comment
  • 6 months later...
On 5/17/2023 at 7:38 AM, elenaouterloop said:

Hi there-- I'm having a similar issue and any workaround would be appreciated. (https://www.outerlooptheater.org/impact)

The whole infographic is one image. On the mobile version, the "Fill" option is perfect, but on the desktop version, it just moves around too much depending on the size of the window (screenshots of different widths attached). 


Thank you in advance!

Screenshot 2023-05-16 at 8.38.01 PM.png

Screenshot 2023-05-16 at 8.37.52 PM.png

You can use above method (2 images), then we can give code to show 1 on desktop, show another on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
  • 1 month later...

I am also having this issue. I have a full width image header with type that is set to fill on desktop. On mobile it needs to be set to fit but I can't set it separately. This is a major issue. Has anyone else figured out how to do this? Does designing a different graphic work?

Many thanks.

Screen Shot 2023-10-13 at 6.44.11 PM.png

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.