My grid element does not go down when the page is resized

Design help General
1

Hi guys! I’m designing a Ecommerce website and I’m trying to design a two columns element. On desktop view I nailed it, but when the page is on Tablet or mobile view, the grid structure does not go down, it keeps displaying by overflowing the page.

This is on Desktop view, and it looks great

33
331754×835 363 KB

This is on mobile view, here is my problem

45
45356×767 213 KB

I wanted something like this on Prospero template UI Kit, but I wasn’t able to copy it.

08
08417×860 124 KB

Here is my site Read-Only: https://preview.webflow.com/preview/ecommerce-royalglass?utm_medium=preview_link&utm_source=dashboard&utm_content=ecommerce-royalglass&preview=b0a4919b9e8d215a8b97752bed2dbce2&mode=preview[1]
(how to share your site Read-Only link)

2

or better help share your read only link, here is how

On tablet or mobile view try to delete the right column.

3

Another solution is to use flex box and change to vertical in tablet and phone mode

4

Sorry guys for my delay.

Well, I’ve already tried that. I’m trying to copy the same structure of the template, including the same presets, but it’s no working properly.

5

I’ve updated the ready-only link, so you can see how the project is going.

6

Go through this video once. The solution to your issue is at the last topic of the video.

Try This:

In Tablet layout, Just Right Click on the Grid Rows (Red Bar) and Delete all of them except one and it will stack down.

Also, you have around 10-15 rows in the desktop. Delete them and keep only 2 for a better layout.

7

I’ll try that. I was using many rows due the Template, once I was trying to replicate it since I wasn’t able to copy the entire section to my project.
It’s funny because I did that with the footer, but this element of the template it didn’t work.

8

I solved the problem my getting rid of the grid structure and using the basic Flex Box. A couple of tweeks here and there but now is working.

Thank you guys for your support!