Work while crying.. no time!!

Community feedback

• 

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  Hi @Khalid-debugg your solution is allright to make it look the same accross difrent screen sizes u need to remove fixed positioning properties for .containner and diplay flex to the body like this:

     body{height: 100vh;
      flex-direction: column;
      display: flex;
      align-items: center;
      justify-content: center;}  
  

  AND REMOVE .container { /* width: 87%; */ /* border-radius: 15px; */ /* margin: 100px auto; */ }

  -To make setting up box shadow easier here is tool https://html-css-js.com/css/generator/box-shadow/.

  Hope this help 😊

  Marked as helpful

  1

  ---

  

  GIGACHAD•230

  @Khalid-debuggPosted over 2 years ago

  @mohammedlahboub I just tried it and it actually looks better. Thank you <3

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Hello GIGACHAD, congratulations for your solution!

  Answering your question about media queries:

  Fortunately in this challenge you don't need media queries, all you can do is make your component responsive to allow changes when the screen scales until the mobile version.

  Media query is used to allow changes to an element when a the window reaches some width, for example 768 for tablet and 375px for mobile.

  When you set media query all the properties you insert inside the @media make the elements changes when reaches the breakpoint. If you want to apply a media query for this challenge, here's one example, you can change the pricing flex-direction when the container reaches width 280px.

  See the example code below:

  @media (max-width: 280px) {
  .annual {
      display: flex;
      align-items: center;
      flex-direction: column;
  }}
  

  More info about media query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Hope it helps, happy coding!

  Marked as helpful

  1

  ---

  

  GIGACHAD•230

  @Khalid-debuggPosted over 2 years ago

  @correlucas It is a good point but what kind of device has that width?

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Khalid-debugg It it's an additional media query for mobile, you can do your media queries until 375px and then forget, but my advice was to fix all the container behavior even in a small screen scaling, instead of 280px, you can use 375px that's the minimum mobile breakpoint. I like to fix my solution until 280px to avoid strange behavior or elements poping out the container in all situations. You can do tests under 400px using google devtools in the mobile mode.

  Marked as helpful

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Khalid-debugg Here you can a much better and precise info about what I was trying to explain Giga:

  https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  Maybe I wasn't clear, sorry haha

  Marked as helpful

  1