Order summary component Chellenge

Community feedback

• 

  P

  Katrien Schuermans•1,420

  @katrien-s

  Posted almost 4 years ago

  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.

  00

  Marked as helpful
• 

  P

  Katrien Schuermans•1,420

  @katrien-s

  Posted almost 4 years ago

  Hey, it looks good. It does indeed go a bit odd when I resize the screen. Somehow the font & images start growing and eventually wouldn't fit an iPhone SE-screen.

  I'm a bit confused too when I see your media-queries. You strangely put them all on top of your page, whereas I usually write mine underneath. The C in CSS stands for Cascading, which means, everything that comes underneath will replace what's written on top. This is something to keep in mind when writing your code. You've set a max- and min-width. One in rem, another in px. Why did you do this? (I'm trying to understand your code).

  Inside your media-query you also wrote div.container. When you use classes, you can just use .container. It seems to me you went a bit overboard with your specificity and declarations. The hardest thing about CSS is writing not too much code. Try looking into using variables, in order not to repeat yourself. And maybe do a total reset, instead of just margin and paddingin the *?

  box-sizing: border-box;
  margin: 0;
  padding: 0;```
  

  01

  Marked as helpful