Skip to content
Submitted about 2 years ago

Help!! Challenge #6 with CSS and HTML

Feithers•180
@Feithers
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello!

Trying to update the challenge. My question now is: Why, my ".image1" div, when going below 650px (which is the media query limit), just disappears? In my mind should still be 50% 50%, since I gave the property to both divs on the ".main-box" of "flex:50%".

The only thing that changes between 650px and bigger is the flex direction, which is column, but shouldn't it still be showing both divs on 50% each?

BTW I gave the picture div a pink border to see how it was being rendered when adjusting the screen

Thanks!!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Feithers! 👋

    Here are the answers to your questions:

    1. You should not set min-width on the <body> element. In fact, you should not set any width at all on it. The reason is to make sure that the page is responsive. For the main-box, you should only set a max-width to prevent it from filling the entire page on a wide screen. You don't need to set width and height to it.
    2. The overlay is not positioned on the top of the image. You should set position: relative on the image1. Then, do absolute positioning on the overlay. But, I recommend using mix-blend-mode to create the overlay. This is a more robust and simpler solution.
    3. If you follow my suggestions for the first question that should make the card fits on the page with an overflowing image. To prevent the image from overflowing, you need to make it a block element and set max-width: 100%. You don't need to set min-width and max-height.

    Then, from there you can adjust things to make the site responsive.

    A couple of suggestions:

    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell
    • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN
    • You should rarely set a specific width on the element. Setting a width will make the element not responsive.

    I hope this helps. Happy coding! 😄

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