Four card feature section

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 2 years ago

  Hello

  I'm afraid you've got overflow bugs in this and it's not fully responsive.

  A big part of the problems come from using width: 100vw. You never want to use 100vw anywhere, because it doesn't account for scrollbars or device notches. So you are effectively telling the browser you want something to be "100% + scrollbar width wide". That then causes a horizontal scroll to appear.

  Similarly, you never want to limit height to 100vh. You need to use min-height instead so the contents can grow when they need to.

  It looks like you have some report errors that need fixing above. You definitely should not be using h4s for those paragraphs.

  I'll add that I think you've used the body background for the cards and vise-versa.

  I strongly recommend you refactor the HTML and css approach in this. It is a CSS grid challenge. That's what the design is there to teach. You will learn a lot by building this grid with CSS grid instead of attempting it with flexbox. Grid is made for this.

  13

  Marked as helpful