Skip to content
Submitted about 1 month ago

FrontEnd Mentor Blog Preview Challenge Using HTML and CSS

Amaterasu247•30
@Amaterasu247
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 challenges did you encounter, and how did you overcome them?

First time working with an SVG.

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

I faced difficulty trying to fit the svg into the flexbox container. For example when i had the window half open the design was like the preview but when i tried resizing the window to fullscreen the svg overflowed outside of the container.;

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted about 1 month ago

    Hi Amaterasu247, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

    Instead of using "width" to specify an absolute width, use "max-width" to specify a maximum instead. By doing this, the content will behave much more amiably in smaller resolutions, making it easier to make the project responsive.

    .container {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid black;
    border-radius: 1rem;
    box-shadow: 5px 5px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    max-width: 380px;
}

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    0
    Amaterasu247•30
    @Amaterasu247Posted about 1 month ago

    @AdrianoEscarabote Thank you very much for your helpful feedback

    0
    Adriano•38,390
    @AdrianoEscarabotePosted about 1 month ago

    @Amaterasu247 no problem, keep coding!

    1

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