Need help setting a custom breakpoint for my divs

Hello! On the “Illustration page” of my site I have 2 SVG’s. They are each set as a background on a div and the 2 divs are placed in a section. On tablet view and below the 2 divs stack on top of each other. The problem is when I view the site on a 13" laptop, the svgs overlap each other as seen in the attached image.

I know this issue has been brought up before. However, I don’t write code so I am still having trouble.

Thanks in advance for any help you can provide.
.


Here is my site Read-Only: https://preview.webflow.com/preview/vonburske-design-ee71ffb807120b55697e84?preview=eff244833ac6ee3ed69d2e76ac191a7f

Hey, did you get it fixed, I don’t see the overlap.

1 Like

I have not been able to get it fixed. On the read only site, in the desktop view, try scaling the window to around 1250 pixels.

Okay I went to Illustration page. It’s because you have them as “Background Images”. They need to be placed inside the Div as an Image element. Give them a class, add 100% to width and height, nothing else. Webflow will resize automatically for you. Remove the background images.

I have tried that, and it is definitely much better than what I had before, so thanks!

The only thing is that now there is a lot of white space above and below the image that is not ideal. The ideal situation is that it would display the images in their tablet view but at a break point that is larger than the tablet break point. It looks like the tablet breakpoint is around 990px. I need it to break to tablet view at around 1250px. Any ideas? I believe it can be done with custom code but I haven’t been able to get it to work.

Thanks!

Okay in this case, reduce the height of the div. And when image is added, you can cover it with a large image. The image can be dragged on the edges right in the Designer, once it’s added. I think your fit will need some tweaking for sure, UNLESS… you get out of that column/container and use the whole screen, which I suggest. :grin:

I think you’re right, my best option for now would be to just use a fullscreen image. Thanks for your help! I would still love some insight if anyone knows how to add custom breakpoints.

You can’t add custom breakpoints, but your particular issue could be addressed by using the vw sizing element. VW refers to “viewport width”, and it can be used to designate both widths AND heights on your page.

What I would do is set your elements to something like 30vw x 30vw, which would make them scaling squares, but give them a max height/width of 400px x 400px (these numbers are just for concept demonstration), then set the height of the div itself ALSO by using something like 50vw and a maximum height of 600px, which would give you a consistent 10vw of white space once the viewport gets lower than this artificial breakpoint.

(If you’re still working on this issue, I know it’s been months), let me know if you’d like some more custom math on those settings. I am certain this would solve your problem, though.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.