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?
