@DigitaleWeltLibrary
Posted
Hello, I think you're making life too difficult.
Here's what you need to delete: (You don't need a @media query
)
@media only screen and (min-width: 275px)
@media only screen and (min-width: 465px)
@media only screen and (min-width: 545px)
@media only screen and (min-width: 625px)
@media only screen and (min-width: 1100px)
@media only screen and (min-width: 1440px)
Instead, we'll use Grid
to center the card:
.app{
display: grid;
place-items: center;
min-height: 100dvh;
}
Now let's give our map a max-width
and margin
when it comes to mobile devices (so it will be responsive):
.app-box{
max-width: 350px;
margin: 1rem;
}
- We don't need to size the headline.
- The paragraf we can give a size of
font-size: 1rem;
Happy coding 😁
Marked as helpful
@DigitaleWeltLibrary excellent reply!
Another option would be to use flex to center the card:
.app {
display:flex;
justify-items:center;
align-items:center;
}
You can learn more about flexbox here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Great work on this challenge, and as Raphael said, happy coding!
@DigitaleWeltLibrary
Posted
@coppinger
Thank you! Right, it works whit flex
, too. but for flex
you need more lines of CSS. 😅
@SerPet-eng
Posted
Thank you Raphael Bröderbauer! for the feedback. It makes my code more refine and understandable. I really appreciate your comment about my code and very first Frontend Mentor Challenge.
I'm looking forward for your feedback to my next Frontend Mentor Challenge. After I updated the code, I'll do another challenge.
@DigitaleWeltLibrary
Posted
@SerPet-eng Thanks, glad to hear that I was able to help 😉
@DigitaleWeltLibrary more or less lines of CSS (or code in general) does not always constitute better code
In this case, I would argue that as we're only dealing with one dimension of placement, flex would be more appropriate, but that's probably largely personal preference.
I like to think as flex as being for col/row layouts (one dimension), and grid for layouts that require placement across two dimensions.