Grid moves text boxes when previewing/publishing. Cry for help #2

This is my second site on Webflow and my first time using grids. From what I understand I set up the grid properly as a guide. Filled the spots with divs and set them to relative. Filled the divs with text boxes and set them to absolute to be relative to the div boxes. It looks fine so far but all the text moves when I go to preview the project/publish it. Just super lost and looking for some help with it.




https://preview.webflow.com/preview/roccos-pizza?utm_medium=preview_link&utm_source=designer&utm_content=roccos-pizza&preview=87628c716d4695a8f44f92cbeb7f0958&pageId=643990d72c2a4d054caf647e&workflow=preview

I would strongly suggest you use flexbox instead of grid for this. More info on flexbox here:

Also, to help you understand the concept of flexbox more, I did a stream about it here:

One suggestion : Simplify!
In topic one, you have three rows that could be done with one single row.
Futhermore, if there is more than one item in a cell, keep them together inside of a div. It’s weird, but it works.
Finally, there is a setting to turn off the auto-flow, so you can manually move items at each break point.

1 Like

Got it! the Flex box system worked well. Thank you so much!