Hi, in the page 2 “productos” i need to make a 4 column list and the content from column 1 needs to be relative to column 2, and column 3 to 4, something like the image (product is in column 1 and the sizes from this product on column 2)
it works great on desktop and tablet, but on mobile it gets all messed up, what can i do?
Thanks a lot!
The columns are not working in your favour at the tablet and mobile level.
Let’s start the columns from scratch.
Make 2 columns, style them with the name “info column”, set display settings to flex, and flex layout to “Direction: Column”.
Within each column put 2 divs, which will now align vertically.
Name the top one “info heading” and the bottom one “info content” (or as you please).
Put your column heading in the “info heading” div and style how you like.
For the bottom div named “info content”, set the display settings to Flex and the Flex layout to “direction: row”.
Put the 2 relevant “infotext” textboxes into the “info content” div.
Click on a one to the textboxes with the style “infotext” and under flex child settings change the sizing to expand.
If you have done the above for both columns the content should look almost identical to what it looks like now, except function on all device sizes.
If you get stuck let me know.
In this case it looks fine, however if you have text that takes up multiple lines and you want the all to align appropriately you might get easier results using a list and list items, as the alignment will stay appropriate more often.
I would publish it to the webflow url and visit the link from a mobile.
The mobile view in webflow is good, however to make sure everything works well i would double check with an actual mobile.
](https://preview.webflow.com/preview/perfiles?preview=4251fa9cc3d0e5f6482b4d785b97a22e!%5B%7C690x385%5D(upload://feyU0wEnaJlUlW5Xv7KT1sU6Kav.PNG)){kind=link}