Order-summary-component. I need help with media query :(

Community feedback

• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hi Ali

  Both rules in your media query are ok and sort of working:

  The background image does change but it is so subtle that it's barely noticeable. Add background-size: contain; and try resizing to see what I mean:

  @media  screen and (max-width: 375px) {
      body {
          background-image:url(images/pattern-background-mobile.svg);
          background-size: contain; /* add this to see the background change at 375px breakpoint */
      }
      .card {
          width: 300px;
      }
  

  The width 300px doesn't work because it is being overridden by line 38. If you place your media query further down the file (after the .card class below line 48), the width: 300px; should work.

  Happy coding!

  Marked as helpful

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  What about the Media Query are you having trouble with? In your Media Query the .card width is being overwritten by the styles just below it. So the 300px width is never used A max-width of 375px isn't really useful because there are almost no phones with that low of a resolution. I would design for 375px(iPhone X) and above.

  The card looks good though.

  As far as the accessibility warning, your image should have ALT text, Change the Order Summary to an H1, and either change the attribution div to a footer or you can remove it entirely. Download AXE DevTools an it will help clear accessibility issues: https://www.deque.com/axe/devtools/

  I hope this helps

  Marked as helpful

  1
• 

  Ali•170

  @alisbaiPosted almost 3 years ago

  Thank you guys for the help. I'm learning much more here on this platform. I appreciate the help. Thank you guys.

  0