Problem with the images on higher resolution screen

Design help General
1

Hi there!

I’m having a small issue with breakpoints.
So I want to position my image on the edge of the canvas, and to do that I’m using minus margins on the side. The problem is that when I set a larger breakpoint above 1440px. So at the beginning I adjust my pictures on the edge with the margins but when the resolution grows around 1600px appeares a gap between the the image and the edge of the canvas and there is still quite a lot to the next breakpoint at 1920px where i can adjust it.

If I adjust with minus margin on the side in the range of 1440 px to 1920px resolution in the end I will either end up with a gap or image hidden too far at the beginning. Normally through code in CSS I could easily change every element no matter what resolution of the screen is but in Webflow it seems that I’m limited between those ranges. I tried also to position picture with absolute nad relative positioning but it gave me the same result.

I’m knew to webflow so please be merciful. I will be very thankfull for any help or solution.
Have a nice day!

All the best,
Dam

Zrzut ekranu (107)
Zrzut ekranu (107)1324×826 96.9 KB

Here is my site Read-Only: https://preview.webflow.com/preview/unite-2c395c?utm_medium=preview_link&utm_source=dashboard&utm_content=unite-2c395c&preview=0cffed14fe965758c97d0e1bc9a7da19&mode=preview

published webiste link: https://unite-2c395c.webflow.io/

2

Hey @Dam_G,

Couple of steps needed to fix this:

  • Set your “section” left and right side paddings to 0px (instead of 60px)
  • Set your “container” Max W to 100vw (instead of 1160px)
  • Set your “content wrapper” left side margin to 50px (instead of 0px)
  • Set your “image 6” right side margin to 0px (instead of -180px)

Put these settings for all break points from base and up.

image
image1920×1080 280 KB

2 Likes
3

Hi Tim!

Huge thanks for taking a look.
It seems that it’s a good solution, photos stick to the edge right now.
I just needed to change all those paddings of each section and the width of the container.
Thanks a million!

Cheers! :slight_smile: