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:
-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?
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!
