HTML, CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  I'm afraid this looks very broken for me I think because of how you're using viewport units on height. You'll only ever want to use a min- height in viewport units when necessary, which then allows content to grow as needed.

  For this component though, I don't think even min-heights are necessary anywhere except the outer wrapper, maybe the image container if you are doing it with a background image and not placing it in the html...

  Before any of that though, you need to address the html first

  • use a heading
  • remove all the line breaks
  • swap mark for span
  • put the words like "companies" in lowercase in the html so they can be read out by screenreaders. You can change their case to uppercase visually using the text-transform css property.

  Good luck

  1

  ---

  

  Vinay•125

  @foolhardy21Posted over 3 years ago

  @grace-snow thanks for helping. i'm making the changes in html. can you also help me in a case where if i reduce my viewport height, the list elements are overflowing its parent div from bottom. how do stop this? thanks.

  0
• 

  Prabhjot Kaur•15

  @prabhjotkaur10Posted over 3 years ago

  Hi, Nice attempt. The image on right side, cuts, since its element does not have a background-size. I would suggest you to replace this piece of code in css. Also you can fix it in mobile view.

  .card-image {
      width: 600px;
      height: 100%;
      background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-desktop.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      background-position: center top;
  }
  
  @media (max-width: 500px).card-image {
      width: 100%;
      background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-mobile.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      height: 100%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
  }
  
  This will fix the skewed image issue in mobile view.
  

  1

  ---

  

  Vinay•125

  @foolhardy21Posted over 3 years ago

  @prabhjotkaur10 thanks a lot

  0
• 

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  I would recommend you learn SCSS to make your whole code absolutely reusable 👍

  Good luck 😃

  1
• 

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  Hi Vinay, Congratulations for finish this project, there an issue in your background image. you need background-repeat: no-repeat; so your image will not repeated.

  1

  ---

  

  Vinay•125

  @foolhardy21Posted over 3 years ago

  @madegilangaditya thanks. but if you visit the site url, the image doesnt repeat. any idea why this issue is visible only in this particular case(frontend mentor design comaprison).

  0

  

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  @foolhardy21 I think because you use height:55%; on your card class so the height will shrink according to parent element.

  0