Join the Webstudio community

Updated last month

Responsive Margin Inconsistencies in Website Sections

At a glance

The community member has a question about their website where the sections with images have more margin than the others in the responsive breakpoints, even though they applied the same margin to all sections. The community members suggest using the Image component instead of a background image, as it would be optimized for different screen sizes automatically. They also mention that the spacing around the images may be bigger because the community member is testing on a bigger screen than the breakpoint, and that switching to the Image component could solve the issue. The community member confirms that changing to the Image component solved the problem.

Useful resources
Hi guys, I have a question. On my website, I applied the same margin to all sections, but when I publish the site, the sections with images appear with more margin than the others in the responsive breakpoints. What could be happening?
B
D
11 comments
Please share a project link
Can you screenshot specific place?
Why do you use background image instead of Image component?
It would be optimized for different screen sizes automatically
You can also convert local styles of your image to token. This way you can change styles on all images at once.
Attachment
image.png
In your specific case spacing around images is bigger because you are testing on a bigger screen than breakpoint. See if you scale canvas a little you get same spacing. You can switch to image component and it will scale automatically.
Attachment
image.png
Thank you a lot, you were right, I tried to change to image component and the problem was solved.
Add a reply
Sign up and join the conversation on Discord