Responsive page with grid(Desktop) & Flexbox(Mobile)

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 25 days ago

  Hi, @VSKarthikT

  I checked out your solution and I have some thoughts:

  HTML Suggestions:

  • For your .wrapper_[number] elements, consider using the article tag instead of div, as it gives more semantic meaning when wrapping content that feels article-like.
  • The .w_content[number] elements inside .wrapper_[number] might be redundant. You could apply the .w_content styles directly to their parent .wrapper_[number] and remove the extra elements for a cleaner structure.
  • For title[number], which seems to be each article’s heading, try using h1 instead of p tags. An h1 establishes a clear heading hierarchy, especially useful for accessibility and SEO.

  CSS Suggestions:

  • Many of your classes, like .title1, .title2, .title3, etc., have identical styles. You can simplify this by grouping them. For example:

  .title {
    font-weight: $CT_font-weight-title;
    font-size: $CT_font-sz-title;
    letter-spacing: 0;
  }
  

  • Try using min-height: 100dvh instead of height: 100dvh on body to prevent layout issues on mobile when the address bar shifts.
  • width: 100% isn’t necessary for section or block-level elements as they already span the full width by default. You can remove it to simplify the code.

  Hope this helps!

  Marked as helpful

  1
• 

  Amit Dhakal•530

  @herojk64Posted 25 days ago

  Ok, if you want to reduce CSS the very first concept is to make as minimal html as possible. if you see your html there are few things I saw. why aren't you dividing your sections with section tag rather than div. you are just using section as main component which is nested in the main. I also don't see any header tag or h1,h2,etc. you see with the content you can separate the headers based on the title looking content. also article tags are best for that if you want to do better SEO. Anyway mixin in SCSS was a great find for me took me seconds to understand but didn't knew it was a thing in SCSS so thanks for that.

  Marked as helpful

  1