Submitted over 1 year ago

Help!! Challenge #6 with CSS and HTML

Feithers•180

@Feithers

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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!!

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
Hi, Feithers! 👋

Here are the answers to your questions:

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.

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.

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! 😄
0
Feithers•180
@FeithersPosted over 1 year ago
@vanzasetia Hello and thanks for the response, I'm trying to get it done as correct as possible, but I still find some stuff that I can't get to make it work. I updated my solution, and fixed some stuff, but the thing that's stopping me atm is the one I posted, which I'll copy paste:

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%".

Btw, did I do the mix-blend-mode correctly?

Thanks!
0
Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
@Feithers

On the mobile layout, the image is disappeared because the flex container switches direction to column. It means that flex-basis: 50% is the height for the <div>. It is no longer relative to the width.

For your information: flex: 50% = flex-basis: 50%, flex-grow: 1, flex-shrink: 1.

Now, <div class="image1"></div> is empty. It has no height by default. So, flex-basis: 50% won't give the element any height.

I strongly recommend using <picture> element instead to display the image. The actual image element will have width and height. This way, you don't have to set a width and height manually.

"Btw, did I do the mix-blend-mode correctly?"

Yes, you did it right with background-blend-mode.
0
Feithers•180
@FeithersPosted over 1 year ago
@vanzasetia Thanks for the response! I've tried adding, on the media query, to both boxes a height on 50% (.box-left and .image1) and stilld it show as hidden. Why is that? I've added the height, right?

Thanks :)
0
Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
@Feithers

I don't see any height: 50% on your code.

Also, the 50% is fifty percent of what? The div is empty. It has no width and height.

I recommend using <picture> element instead. This is the second time I said this. This approach is much easier than using a background image because you don't have to set any width and height.
0
Feithers•180
@FeithersPosted over 1 year ago
@vanzasetia Ok after playing around a bit I think I understand what you mean. Since the parent box of both .image1 and .box-left doesn't have a height, even if I give it 50% height, it wont work since 50% of nothing is basically nothing right? I'm trying doing it with <picture>, but isn't that the same as just using any div and throwing the img inside of it? And how do I do the blend mode if the img isn't part of the background anymore?

Thanks!
0
Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
@Feithers

It is different from the background image approach. Using <picture> and a <source> for a different image. As a fallback using the <img> element.

I recommend taking a look at the MDN page to learn how to use it. For sure, it is different from using a <div> and an <img>.

For the blend mode, use mix-blend-mode.

I recommend looking at @DarrickFauvel's solution for this challenge. He did a great job on doing this challenge.

Frontend Mentor | Stats preview card component - HTML / Sass / Grid coding challenge solution
Marked as helpful
0

Please log in to post a comment

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