Best Practice in Structuring Components for Resizing

Design help General
1

Hey everyone,

I was wondering if anyone had any tips for structuring components on the page to make them more conducive for resizing (e.g. mobile, tablet, etc.)

For example, I used grid and flexbox to create these blog thumbnail components, but when I resize for tablet, all of the content spills out of the block. What’s the best way to avoid something like this from happening, and to properly setup my page so that it works better on other devices?

image
image1492×802 119 KB

Thanks!

Here is my site Read-Only: LINK

2

Hi @bugsyb

You should consider several things:

  1. if you remove the max height from the CMS Items, they can grow taller to accommodate the text as the screen becomes narrower,
  2. you should also consider to give the font size in VH or VW so it is dynamically sized together with the container
  3. you can make the margins/padding also in VH/VW so that they will become thinner/smaller proportionally with the screen size

those are the few things to try first…