Adjust images sizes on mobile bp started cascading up today. Can't fix or revert

Design help General
1

Images styling was cascading downward fine until today. Website has been publish already, and now any change to height or width to images in mobile viewport cascade up to desktop. Images are in a grid. Is there a way to disconnect the upward cascade?

Here is my site Read-Only: [https://preview.webflow.com/preview/white-party-website?utm_medium=preview_link&utm_source=designer&utm_content=white-party-website&preview=3172a97e6668583d296db21bd6ec05ff&pageId=604fc1c8cbcc9b35a8312a51&workflow=preview]

Example is the Cocktail Dress section at .io link below. I changed the image size in mobile and it changes image sizes in desktop now.

3

If I understand correctly, don’t use “auto” in this case? Manually set the PX value for each breakpoint?

Please forgive typo’s. Sent from my iPhone

| Stan justAnotherDeveloper
July 12 |

  • | - |

HI @iambic007 most probably you are changing class so if your image have on desktop set height to Auto and on mobile you will set height: 100px it will set class globally. You can set height on desktop let say to 300px and on mobile overwrite this value to 100px.

4

hi @iambic007 I have deleted my response as I do not see any cascading upwards to desktop. Can you be more specific or record video with issue you are experiencing?

5

Hi Stan. I set the hieght on desktop to 300:px and then changed height on mobile to 150:px. I went back to desktop and all the images changed to 150:px. I also tried to create a separate image class on desktop and not on mobile, but changes still cascade upward. Any other advice?

6

https://cln.sh/JY8OHQ

7

Hi Stan-
I saw your video. I am doing them same but using the gear icon in the image to change the image hieght. here is my video. Screen Recording 2021-07-12...

8

hi @iambic007 finally get it :wink:

You are overwriting custom size you are setting for each image so it doesn’t mother where image appear as you set first max size to 300px but after you overwrite max size for image to 100px for IDENTICAL image. You should use CSS for sizing images in viewports.

TIP:
I was checking your images and size is around 600px and you setting these to 300px as I presume that you will do something with them on hover or click as they have class magnify. That is not how it should be done and you will get bed results in lighthouse or other tool for checking performance.

You should upload thumbnails as main image for Grid and on hover or click call URL to big image.

Anyway, for resizing you should use CSS as I have using in video that is common practice.

9

I think I understand now :slight_smile: Using the Image Element Setting gear icon sets the master class size of that image regardless of viewport. You should then always use CSS Editor Panel to override setting in each viewport.

Image (and sizes) are provided by Amazon and other merchants. I couldn’t get the Magnify feature to work, so should I reduce the pixel size of the images so it’ll load faster? I’m pretty good at image editing in Affinity Photo.

Thanks again,
Michael

Sorry for the clarifications, this is my first website.

10

hi @iambic007 this settings has nothing to do with class its just attribute (width - height) limiting size if needed but usually you keep it auto

I will recommend to visit Webflow University to get familiar with this platform and here is link to images

11

Hi @iambic007 if you do not have further questions to this topic feel free to close your request

12

The video helped, thanks!

1 Like