HELP: Element Scaling Problems. Too Much CSS?

Design help General
1

Hi there I need some help with a part of my site which is breaking apart and losing its shape whilst scaling down.

https://taps-toilets.webflow.io/#Get-In-Touch-Text

https://preview.webflow.com/preview/taps-toilets?utm_medium=preview_link&utm_source=designer&utm_content=taps-toilets&preview=a2943420c38c89a20d710caba12a16d7&mode=preview

Here is a video of the problem in action, as you can see its ever so slightly just messes up, the boxes lose shape, they don’t conform and overlap from time to time.

https://vimeo.com/378535592

2

Hi DroneMotion,

The first thing I would do is take all of the content out of the columns and put it in a 2x4 grid instead. This will respond to screen sizes much better than the columns. Then remove all of the background images and add gradients instead. Then fix your padding on all of the divs and you will be in much better shape.

3

Or use flexbox. Better the grid

4

Sorry but i don’t understand, I tried using a grid before but then someone told me that wouldn’t work.

I’ve just tried again but i can’t make the grid shape the way i want it too. It literally only shapes in a grid, no freedom

5

Bump. Still having major issues and even more so with the banner image and text at the top.

Read only: Webflow - Taps & Toilets

6

Bump. I’m now having major issues.