@vanzasetia
Posted
Hi, Feithers! 👋
Here are the answers to your questions:
- You should not set
min-widthon 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 themain-box, you should only set amax-widthto prevent it from filling the entire page on a wide screen. You don't need to setwidthandheightto it. - The overlay is not positioned on the top of the image. You should set
position: relativeon theimage1. Then, do absolute positioning on theoverlay. But, I recommend usingmix-blend-modeto 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 setmin-widthandmax-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-heightvalues to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN - You should rarely set a specific
widthon the element. Setting awidthwill make the element not responsive.
I hope this helps. Happy coding! 😄
@Feithers
Posted
@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!
@vanzasetia
Posted
@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.
@Feithers
Posted
@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 :)
@vanzasetia
Posted
@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.
@Feithers
Posted
@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!
@vanzasetia
Posted
@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
