Hello,
I do have a slight problem with vertical alignment.
All icons and text are aligned correctly, but when the viewport gets smaller and the layout changes to 2 rows with 3 columns each, two of the boxes are missaligned due to the fact, that two of the boxes above have more text than the first one.
Is there an easy possiblity to change that?
Greetings
Marcel
Probably, but without seeing any of the code we can’t really hep you.
Show us the html and the css for this.
Hi SamA74,
as it would be way to much to copy here, I’d like to give you the url to the specific page: https://reidelbach.jimdo.com/
Thanks for your help!
Greetings
Marcel
The grid system you are using for that layout seems a bit over complex for what it does.
Aranging the blocks in floated columns is causing the problem as the longer text pushes the next box down in the column.
I would probably redesign this using a modern layout method like flexbox or css grid which would make for much simpler html and css. I would probably also go for a row based layout to avoid the problem of columns pushing down.
Here is an example using flex. It may not fit exactly as is, but it’s a good start.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
