Skip to content
Submitted 22 days ago

Blog Preview Card

#pure-css
Josh Kahlbaugh•110
@Joshk7
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?

I tried to convert any pixel value to it's respective proportion to the root element font size using rem. For example:

   .title {
      font-size: 1.5rem;
   }
What challenges did you encounter, and how did you overcome them?

One challenge that I had was getting the Figtree font from Google Fonts and I ended up linking that font within the css file to overcome that issue.

What specific areas of your project would you like help with?

I read the problem description and it said that the font sizes should be smaller on mobile devices so let me know if this solution satisfies that requirement.

Community feedback

  • hitmorecode•7,080
    @hitmorecodePosted 22 days ago

    Nice well done. Here is a simple tip to convert pixels to rems. Add this in the root.

    :root {
  font-size: 62.5%;
}

    Add this in the body

    body {
  font-size: 1.6rem;
}

    With this you have converted to a base 10 system. Now to convert pixels into rems you just need to divide the number of pixels by 10. For example font-size: 26px; will be font-size: 2.6rem;

    I hope you find this helpful. Keep it up 👌👍

    0
    KapteynUniverse•2,700
    @KapteynUniversePosted 22 days ago

    @hitmorecode I am sending this before Grace Snow see it and shoot all of us :D

    https://fedmentor.dev/posts/rem-html-font-size-hack/

    @Joshk7 If i recall correctly there was only 2 px of change for the h1 between mobile and desktop design on this challenge. Using only font-size: 1.5rem; won't do the job (it is good btw, it just won't change by itself). I didn't care about it when i was doing this challenge but you can use clamp function if you want. There are also calculators for it making it easier to use.

    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