2 replies [Last post]
prudentdad
prudentdad's picture
Offline
newbie
Last seen: 33 weeks 19 min ago
Timezone: GMT-4
Joined: 2016-09-20
Posts: 4
Points: 7

I'm using a height of 60px on a text section of my home page in order to keep my grid boxes the same height

This is on my site at Dealmazing

This is an image of the grid boxes here https://ibb.co/eSGLtn

you can I've circled the part i'm asking about.

It looks fine on desktop--but when you get to Mobile it has too much spacing.

Example of that here: https://ibb.co/j5c4KS

I notice that on mobile if i remove the height it looks perfect, but then if you look at it on desktop, all of the grids are misaligned.

anyone have a good solution for this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 21 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9717
Points: 3793

Simple

For your smaller viewports (phones, tablets, e.g.) simply remove the height property.

For accessibility's sake, carefully reduce your viewport width until there's a break in the design. Then compute your breakpoint width in EMs. This will allow for the user setting a different default font size from your own.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

prudentdad
prudentdad's picture
Offline
newbie
Last seen: 33 weeks 19 min ago
Timezone: GMT-4
Joined: 2016-09-20
Posts: 4
Points: 7

duh, i should have known

duh, i should have known this. thanks for smacking me in the head Gary--much appreciated.