Aligning info in a responsive way

Hi webflowers. I’m not sure how to properly align some info in the way I have mocked up in this working example. If looks OK here, but is not responsive. I’d like to know how to remake this so it look similar but works well on different screen sizes.

Here is the live site (just a mock up)
https://onix-and-filter.webflow.io

Here is the share link
https://preview.webflow.com/preview/onix-and-filter?utm_medium=preview_link&utm_source=designer&utm_content=onix-and-filter&preview=2332500e37ec30db0b42f49496b992e9&pageId=5fa96f5a2cc8f033125c5c32&mode=preview

Thanks!

Hello,

Hope you are well.

For this I would probably get rid of all the grids and have them as flex boxes. Having a grid within a grid within a grid can seem quite confusing.
As for changing screen sizes. I would make it so the itm information sits under the image of the book cover.

1 Like