Responsive page using flex

Community feedback

• 

  Scott Tabor•150

  @scottttaborPosted over 1 year ago

  Hey there Ashley! For this specific challenge I did not use a media query. For these types of challenges where it is just a small component like this one I set the card to be a maximum width that will fit pretty much all screen sizes. You could technically get very specific and make media queries for specific screen sizes, but in general I think the component looks just fine with one standard max width.

  The main layout of my code looks like this usually.

  <main>
      <div class="container">
          <div class="card">
              content
          </div>
      </div>
  </main>
  

  Main tag covers the whole screen, container will contain my card and cards content then that card class will be set to a max width to where it fits all screens.

  Also sidenote, I am pretty new to all this as well. So if I am wrong on anything and anyone who reads this sees that, please correct me! I don't want to give out any wrong info.

  One more thing! Don't forget to set your images <img> tags to fill 100% of their parent containers, so it will fit in the container nicely. You don't always want the image to be its native size. This would make your image shrink and not make your card so big!

  0

  ---

  

  ashleyftw•120

  @ashleyftwPosted over 1 year ago

  @scottttabor thank you!

  1