Skip to content
Submitted over 1 year ago

Responsive blog preview card

foundation
Desmond Maina•90
@des254
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The challenge was pretty straightforward but I encountered some error I found hard to handle. How can I prevent the background color of the button from reducing in idth as the screen size is reduced apart from adding a media query.

Code

Please log in to post a comment

Log in

Community feedback

  • Alyfer Jacobsen•450
    @AlyferJT

    Hey there, congratulations for completing the challenge.

    I saw that you used % on the width of the 'Learning', % gets it's parents size and grab it's %.

    So if the parent size reduces, it reduces too.

    I'm not so expert on that, but i know that this is causing your problem, and i recommend you to search about the size units css, so you can understand why.

    I recommend you to use rem, and set a width you would like in the 'Learning'.

    Sorry for my bad english '-.-

    Marked as helpful
  • P
    Daniel 🛸•44,790
    @danielmrz-dev

    Hello @des254!

    Your project looks great!

    I have one suggestion for you to improve it even more:

    • Using position: absolute is not the best option to center an element. This method can cause bugs and may result in part of the content being cut off on smaller screens.

    Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

    📌 Apply this to the body (in order to work properly, don't use position or margins):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    I hope it helps!

    Other than that, great job!

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