Skip to content
Submitted 14 days ago

Responsive page using flexbox

Luis Guilherme•40
@Luis-Guilherme-stack
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Make some responsivity.

What challenges did you encounter, and how did you overcome them?

Responsive in mobile.

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

Make the page more responsive.

Code

Please log in to post a comment

Log in

Community feedback

  • Mustafa Sen•2,830
    @mustafasen97

    Your CSS already looks quite clean and modern. However, I have a few suggestions for responsive design. These details will be especially useful in your other designs.

    Improve scaling with width and max-width

    You already have:

    .card {
    max-width: 22.5rem;
}

    Instead of only max-width, add a fluid width:

    .card {
    width: min(90%, 22.5rem);
}

    This ensures the card shrinks nicely on very small screens, without getting too large on wider screens.

    Add a smaller breakpoint for tiny screens

    Your current media query only targets screens below 768px, which is great for tablets. Add another for phones (< 375px):

    @media(max-width: 375px){
    .card {
        padding: 1rem;
    }
    .title {
        font-size: 1.2rem;
    }
    .text {
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
}

    This keeps text readable and the card comfortable on small phones.

    Use relative units for better scaling

    Instead of fixed rem sizes, try:

    .title {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
}

    With clamp, your title scales dynamically between 1.2rem and 1.8rem based on viewport width.

    Slightly adjust padding and gap for smaller screens

    To avoid cramped look:

    @media(max-width: 375px){
    .author-container {
        gap: 0.6rem;
    }
    .avatar {
        width: 2.5rem;
    }
}

    Make spacing scalable

    Replace hardcoded margin-bottom: 1rem with 0.8rem or 0.9rem on smaller screens:

    @media(max-width: 375px){
    .status,
    .text {
        margin-bottom: 0.8rem;
    }
}

    I hope these help you. Keep designing. Good luck with your future designs.

    Marked as helpful
  • Amna Ashraf•850
    @Dev-Amna

    Nice job on this blog preview card! 🎉 Your structure is clean, and I like how you used CSS variables, Figtree font, and responsive design. The layout looks modern and well-balanced. Great use of Flexbox too!

    Here are a few suggestions to improve it even more:

    Move your @import for Google Fonts into the <head> section of your HTML. It should be inside a <style> tag or a linked CSS file, not after the </html>.

    In your HTML, the title and description are both headings (<h1> and <h2>). For accessibility, it’s better to use <h2> for the main title and turn the description into a <p> tag.

    Add cursor: pointer; to .title:hover so users know it’s clickable.

    You could also add a hover effect to .card, like transform: translateY(-5px); with a smooth transition, to make the UI feel more interactive.

    Your media query is a great start — you might want to add one for smaller screens (e.g., 600px) to improve readability on mobile.

    Overall, great work — just a few tweaks will make it even more polished! 👍

    Marked as helpful

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