Responsiveness: Why do em's not work in all cases?

Hi,

I have two questions concerning the following page:

https://christophgrothe.github.io/home_plants/

Please look at the first big part of the page with the nine pictures.

Trying to make it responsive, I had a problem with the subtitles (for example “@Mandragora-Store London”) under some of the pictures.

For the majority of pictures it worked fine to use em's as unit to position the subtitles.

For example

@media only screen and (min-width: 40em) {
     p.pflanze3 {
       position: relative;
       top: 1em;
    }
}

However, this only worked for the pictures which fill the grid to 100%.

When I tried to use em's for the subtitles under the smaller pictures (for example the first picture first row first column), I’ve got problems:

It was difficult to position them AND when changing the size of the screen, the subtitles moved around a bit.
Solution: Using %iges, it works.

@media only screen and (min-width: 60em) {
    p.pflanze1 {
        position: relative;
        bottom: 14%;
    }
}

My question now: WHY do I have to use %iges for some subtitles, WHY do em's not work for all of them?

My second question: Is the way I try to make everything responsive (media queries) ok, or do I do something completely wrong?

If you’re into these types of css questions, I highly recommend checking out Kevin Powell:

1 Like

Thanks for the video :slight_smile: