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

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

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

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! 

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

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.

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.

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!

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!

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