Skip to content
Submitted about 2 years ago

I used gid and display

Shane A Wilkinson•70
@shane86920915
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a hard time controlling the text and making it look the way it was supposed to in the design.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @shane86920915, some suggestions to improve you code:

    • Your card isn't responsive at all, your going to want to back and rewrite a lot of your CSS Code to make it so.

    Heres a link that can should exactly how to do that:

    https://web.dev/learn/design/

    • Your use of the Section Element is incorrect. Its meant to wrap Blocks of content. So your layout should look something like this:
    <body>
            <main>
              <section>
                <div>Text Content</div>
                <picture></picture>
              </section>
            </main>
</body>

    • Never use width when building content that you want to be Responsive. Instead use max-width.

    • The Attribution needs to be wrapped in a Footer Element.; It's the end of you content.

    • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    More Info:

    https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

    https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    • To make it easier to deal with CSS , have more control over your content, and ensure that your content will look the same regardless of browser used I suggest using CSS Resets.

    Your CSS Reset is extremely bare. You want to add more to it.

    Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

    https://www.joshwcomeau.com/css/custom-css-reset/

    https://meyerweb.com/eric/tools/css/reset/

    http://html5doctor.com/html-5-reset-stylesheet/

    Happy Coding!

    Marked as helpful
    0
    Shane A Wilkinson•70
    @shane86920915Posted about 2 years ago

    @vcarames Thank you, your feedback is much appreciated. One of my problems was controlling the text; I couldn't keep it inside the container. I will try and apply what you and Lucas said in my next project.

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @shane86920915, congratulations on your first solution!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using GRID. All you need to do is to use display: grid to activate the Grid and then make the two columns with grid-template-column: 1fr 1fr and its done, now you’ve two columns. For the MOBILE VERSION you can switch to flex creating a media query using display: flex and flex-direction: column-reverse to make the image appear before the text content.

    2.To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

    3.To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

    img {
mix-blend-mode: multiply;
opacity: 80%;
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    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