responsive design using flexbox

Community feedback

• 

  Ashish Kumar Sharma•100

  @as90695Posted over 1 year ago

  Hii REDDDAX Congratulations for completing this challenge. I have one advice for you.

  Please keep your code more readable to other users. Give your image element object-fit: cover; So it can cover the whole div.

  You've done a great job Keep learning and happy coding.

  Marked as helpful

  0

  ---

  

  REDDDAX•30

  @REDDDAXPosted over 1 year ago

  @as90695 thank you so much ll try my best to do what you said . and by making it more readable can you explain more

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div id="container"> with the main tag, <div class="attribution"> with the footer tag and <div class="big text"> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  To center .main on the page using flexbox, replace the height in #container with min-height:100vh. There is no need to give #container a width.

  Replace the heigh in the main with a padding value for all the sides. Give . top a background-color of soft violet and give the img a width and height of 100%, object-fit: cover, mix-blend-mode: multiply and opacity:0.8.

  .top{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  REDDDAX•30

  @REDDDAXPosted over 1 year ago

  hi @Hassiai thank you for the reply, i did what you said for the main and footer so thanks again. but for the filter when i did give the .top and the image the values you said but still nothing works , instead the image just got darker .top{ background-color: hsl(277, 64%, 61%); } img.desktop { width: 100%; height: 100%; object-fit: cover; mix-blend-mode:multiply ; opacity:0.8;

  i hope you explain the problem to me or have a different way to fix it

  0