CSS flexbox, responsive page with media query

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Edwin, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  Your component structure is already good, but you need to fix some specs, for example, the container size is a little bit bigger, is max-width: 900;x and the image isn't scaling proper with the container and is losing its proportions, to fix that you can apply some fixes to the image selector, see the corrections below:

  img { display: block; object-fit: cover; max-width: 100%; }

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Congrats on completing this project!

  There are two ways you can accomplish the image situation.

  The first is using the <Picture> Element using this template.

  This article will explain the picture method in detail: https://www.w3schools.com/tags/tag_picture.asp

  The second option is using Media Queries.

  In your main code, you'll use the Background-Image (url) property to add your image then you'll create a query using the same property buy with the image you want it to change to.

  This article, will go into detail for both methods:

  https://css-tricks.com/responsive-images-css/

  Marked as helpful

  0