four-card-feature-section-master using CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  To be honest, I recommend you redo a lot of this. This is a CSS grid challenge. That's what it's specifically designed to stretch. At the moment this isn't responsive and is badly overflowing at lots of screen sizes, which you can even see in the preview above.

  Here are some recommendations

  • change the html so these cards are all direct children of one div. That's the grid.
  • Change the card headings to h2s not h3s (headings should always go in hierarchical order).
  • In CSS get into the habit of always including a full modern CSS reset at the start of the styles in every project you do. Andy Bell and Josh Comeau have both published good ones. Look them up.
  • look up how to do font face declarations. The fonts don't look right in this. Google fonts will even provide you with the font face declarations you need I think.
  • there are some bits in your CSS that look like they're meant to be notes but they're not wrapped in comments. Make sure there is no extra notes in css unless they are commented out. Otherwise it could cause styles to break unexpectedly.
  • the body shouldn't have a margin.
  • font-size should always be in rem units not pixels. https://fedmentor.dev/posts/font-size-px/
  • look up how to use CSS custom properties. It looks like you're trying to use them at the moment but the syntax is incorrect so they're doing nothing.
  • you'll want to set a max with in rem on the content. In this case that could go on the main landmark. This will stop everything getting too wide.
  • instead of using a break element in the middle of the h1 just set 1/2 of that heading to be display block. The br element Will be announced by some screen readers as "break" which makes the heading hard to read. It's very rare you will ever need to use this element.
  • Similarly, the paragraph at the top should have a max width and margin auto on the sides. The max width can be in rem or ch units.
  • make sure you understand the difference between padding and margin. They seem very confused at the moment. https://fedmentor.dev/posts/padding-margin/
  • remove heights and widths from the cards. They should be sized by the grid template. This is a really important principle to understand when using CSS grid.
  • I think you're really misunderstanding media queries. You will never ever want a media query at 375 pixels. That is far too small for anything. Style should be the default. Then add a min with media query (defined in rem or em) at a point where there is room for the layout change. Inside that media query you only need to override a few specific properties to make the changes to the layout for the larger screen. https://fedmentor.dev/posts/responsive-meaning/
  • you can set the element wrapping the cards to display grid by default and give it a gap property just as you have with flex at the moment. Then in a media query targeting larger screens at a point whether there is room for the layout to change to the large screen layout, add a grid template columns property. Use fr units.
  • you will need to place the cards onto the grid. You can do that with column and row numbers for each card. Or you can give each card a grid-area and use grid template areas on the grid itself.
  • top tips for defining the desktop grid: draw it out on paper if you need to; remember items can span more than one row; remember grid areas can be left empty; using grid template areas you mark an empty area with a single dot.
  • overall the fonts are far too small smallest mobile and far too large on desktop. The style guide gives you the body font size which you just need to convert to rem before use. That tells you what size the main paragraphs should be like in the cards. It's rare that font size needs to change between screen sizes, but it does happen sometimes. Try to get this much much closer to the original designs.

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  Note I can see your previous project have a lot of the same problems. For example the last challenge you did doesn't work on mobile at all. You will need to go back through all previous challenges and apply all of the relevant parts of the above feedback to those as well. That is really important

  Marked as helpful

  0
• 

  Abhi•320

  @abhi-zeroPosted about 2 months ago

  .

  Marked as helpful

  0