Skip to content
Submitted 8 months ago

interactive Blog-preview-card-component

lij110397•230
@lij110397
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?

1.How to make better use of figma files to build html and css files

  • We can check the layers and frames of figma design and create html labels according to the design.
  • Check figma's library to include all defined colors and typography.

2. How to place the component in the middle of its parent container

  • Make the parent container a flexbox and use align-items and justify-content.
display: flex;
align-items: center;
justify-content: center;

3. Variable font and static font

  • Variable font includes different font styles and font weights of the font. In this case, the definition of font family decreased as we can define only one variable font and change its styles and weigths accordingly.
  • Static font means we need to create font family for every variable of the font and give them different names.
What challenges did you encounter, and how did you overcome them?

1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution.

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

1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution. 2. Is there other ways to place the element in the center of its parent container except the code below

display: flex;
align-items: center;
justify-content: center;

Community feedback

  • Ata Abatay•160
    @ataabatayPosted 8 months ago

    I'm not sure what was asked with change font size without media queries so I ignored that as well. How you think about putting an element to the center of its parent is the correct way. If you are annoyed by having to write 3 lines of code for something that you use often, I would suggest reading into css variables and mixins, with them you'd be able to create a single line code like display: center_relative_to_parent by creating that function. Additionally, you can also read into

    .parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    This will also position an element to the center of it's parent

    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