Hello webflow community!
In the website I’m currently designing, the images in the preview consistently change. They will look exactly how I designed them to look, and then as I am scrolling they will randomly become smaller, and in the wrong position.
This incorrect position is also consistently showing on the live version.
These are examples of how I WANT the images to look:
Here is how they sometimes load in the preview site, and permanently show on the live version:
-The 1st image (the hand) is set to relative positioning.
-The 2nd (the landfill image) is set to absolute positioning.
-The 3rd (people recycling) is set to static positioning.
These are the only images affected on the site. Why is this happening, and how can I ensure that the size I want shows up on the live version?
Here is my site read-only link: Webflow - EcGo
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
You have the image inside of a columns element, which means that your positioning experiments aren’t really that relevant. The main positioning and sizing will be governed by that columns element container.
That should be OK though, for the layout you’re after;
- Desktop, text to left, image to right
- Mobile, text above, image below
What you need to do is make sure the image fills the available space in the column, instead of the browser trying to guess what should go there, and choosing a smaller the media srcset it elects to.
Try giving your image element a width of 100%, to make sure it fills that column space.
Thank you!! This was very helpful. I made the hand image 100% width and it solved the issue. I ended up making the landfill a background image instead of an absolute image, which also soled the problem:)
Thank you for your help!
Excellent to hear! If that’s sorted it out for you, you can mark this one as solved so it closes out in the discussion forums.
How do I mark it as solved?