Submitted 22 days ago

MDN Docs, Wave Extension,

Vasu Vallabh• 190

@coding-vasu

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

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:

To dive deep into the world of CSS and JavaScript animations.
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• 20

@raulgaliciab

Posted 20 days 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.

Vasu Vallabh• 190

@coding-vasu

Posted 20 days 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

Please log in to post a comment

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