@Bayoumi-dev
Posted
It looks great Zienab,
My suggestion:
The scrollbar appears on the page that because the body element has a default margin --> margin: 8px;, I suggest you reset all margins & padding.
* {
margin: 0;
padding: 0;
}
This has become a very popular technique. It removes all default margin and padding for every object on the page.
I hope this is useful to you... Keep it up👍
Marked as helpful
@zenab12
Posted
@Bayoumi-dev Yes, I know this but I forget to set css Normalization for Page,
- any tip to use image and fit content more accurate ??
@Bayoumi-dev
Posted
@zenab12 in my opinion.. always when using the image create an element as a wrapper for it and give the image these properties Width: 100%, height: 100% and its wrapper overflow: hidden;, and control the image through its wrapper this gives me more control and more responsively,
in this challenge I styled the image like the following:
<div class="img-wrapper">
<img src="images/image-header-desktop.jpg" alt="image header">
</div>
.stats-preview__img-wrapper {
flex-basis: 48.648%;
background-color: var(--colors-soft-violet);
overflow: hidden;
}
.stats-preview__img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover; /* to resize it to fit its wrapper */
mix-blend-mode: multiply;
opacity: 75%;
}
I don't know if it is a perfect way or not but this gives me more control... Good luck!
Marked as helpful
@zenab12
Posted
@Bayoumi-dev Thanks so Much It's very Helpful
