Hi, That's already a lot better. That weird 'jump' doesn't happen anymore. You know that you can drop the media-query with max-width? It works without it aswell. Try also to combine similar code:
.container > p,
.imgcontent > h4 {
font-size: 0.875rem;
}
Besides, you're using calc for your font-size. This is a well-known trick that's being used to not have to write a media-query for changing the font-size. Just write in your body and it will work throughout the entire page.
body {
font-family: 'Red Hat Display', sans-serif;
font-size: calc(60% + 0.8vmin);
text-align: center;
font-weight: 500;
background-image: url(./order-summary-component-main/images/pattern-background-mobile.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
background-color: hsl(225, 100%, 94%);
background-attachment: fixed;
}
A lot of the code in your min-width-media-query is identical to the other code. You don't need to write the same code twice. Once you declared something to be a certain colour or font-size, it will continue to be this, unless you overwrite the code. In your code you declare background-color
twice. You don't have to.
Also, by writing something like this in your .container:
margin-top: 5rem;
margin: auto;
or this in your .plan:
margin: auto;
margin-right: 4rem;
you overrule the margin setting. Like I said before, CSS is about Cascading, the last line overrules the previous line.
Marked as helpful