Skip to content
Submitted 3 months ago

MDN Docs, Wave Extension,

Vasu Vallabh•190
@coding-vasu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time? Proud:

Changing root font size scales all rem-based elements proportionally, For screens up to 28.5rem wide: Root font size: 12px (default is 16px) 🖥️

Learn:
  1. To dive deep into the world of CSS and JavaScript animations.
  2. Crafting interactive elements that bring concepts to life.
What challenges did you encounter, and how did you overcome them? Responsive Design Challenge:

Making a responsive blog preview card, especially for small screensSolution: Studied blog posts and tutorials to understand responsive design, focusing on font sizes and rem units

CSS Pseudo-classes Challenge:

Understanding :active, :hover, and :focus (for tabindex)Solution: Consulted MDN docs to learn about these pseudo-classes

What specific areas of your project would you like help with? CSS Reset
  • Question: What is the best CSS reset to use and why?
  • Goal: Understanding the advantages of different CSS reset options.
Resources Needed
  • Guidelines for CSS class naming conventions
  • Best practices for CSS file structure
  • Comparison of popular CSS reset/normalize options
  • Tutorials on implementing BEM or other CSS methodologies

Community feedback

  • Raul Galicia•70
    @raulgaliciabPosted 3 months ago

    This is a great solution!

    The only issue that I noticed is that the desktop measurements are maintained in the mobile version. Looking at the Figma designs you can see that the mobile version is slightly narrow.

    0
    Vasu Vallabh•190
    @coding-vasuPosted 3 months ago

    @raulgaliciab Thanks for the feedback.

    I have handled the mobile version. Please check my GitHub code base. You can see that I have used the following CSS:

    @media screen and (max-width: 28.5rem) {
  /* styles for screens smaller than 28.5rem */
  :root {
    --base-font-size: 12px;
  }
}

    This code decreases the base font size from 16px to 12px. Since I am using rem for spacing and sizing, the whole website size adjusts for the mobile version. I request you to review the solution once. I have also attached a gif to showcase the changes in the repository.

    Thank you

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord