HTML, CSS, Flexbox,

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="main_div"> to a <main class="main_div">
  • You can use the <picture> tag to change the image according to the screen size. More info
  • To eliminate space on mobile screens, you should remove the margin-block property for those screen sizes. For this you can use media queries
  • Your body background color should be hsl(30, 38%, 92%)
  • Do not use % for width or height. Better use rem, em or px
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens

  Marked as helpful

  1

  ---

  

  Geokobby•80

  @GeokobbyPosted 10 months ago

  @Blackpachamame thank you a lot, I will look in the source code and do the various edit.. I appreciate 😎

  1

  

  Geokobby•80

  @GeokobbyPosted 10 months ago

  @Blackpachamame this challenge for the image placement has two different images for the desktop screen and the mobile (various) device screens that's why I used the empty tag <div class="image__replacement"></div> so I could change the images with css property "background-image: url()" in and out of various screen with media query too.

  The link you sent with the picture tag seem a little bit confusing to apply with this challenge if you can brief me on it more

  0