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
This is on mobile view, here is my problem
I wanted something like this on Prospero template UI Kit, but I wasn’t able to copy it.
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 )
shokoaviv
(Moshe Assulin)
November 22, 2019, 3:47am
2
or better help share your read only link, here is how
On tablet or mobile view try to delete the right column.
1 Like
Another solution is to use flex box and change to vertical in tablet and phone mode
1 Like
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.
I’ve updated the ready-only link, so you can see how the project is going.
Arialwal
(Prashant Trivedi)
November 25, 2019, 1:51am
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.
1 Like
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.
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!