Streaming live at 10am (PST)

Buggy padding between tiles on Blueboard.com/About

#1

We’re running into spacing bugs with our team headshot photos, on mobile specifically, the tiles are sometimes showing higher or cutting off others (titles and names are cut off/covered up), even though the classes are consistently the same to space out the tiles. Any ideas as to why this is happening?

This lives at Blueboard.com/about.

Thanks!
Madison

#2

You have a tilerow.about that has three nested tiles, which is then repeated and tilerow.about has a margin-top of 40px. This is fine when there are three tiles wide and an issue below. You can adjust your spacing on the div.tile element as needed.

You also need to fix .jobtitle and .name for mobile. Negative margins and absolute positioning is not needed here.

Stay away from negative margins. Usually, when you think you need them, you don’t and you can approach the issue in a better way.

Try using Devtools in your browser. It is the fastest way to play with a layout in a non-destructive way which is absolutely indispensable.

So here is an example of just CSS changes, no element modifications.

CloudApp