@correlucas
Posted
๐พHello Semi-Square, congratulations for your solution!
Your solution layout is already done, but there's some work to do about the component details.
1.Note that for a 1440px resolution your component is a little bit too big, this is due the percentage width
you gave, to avoid your component growing too much, set a max-width
to contain this component, for example the code below:
.container {
display: flex;
max-width: 1110px;
}
2.The image isn't resizing with the correct proportions, this is due the percentage you've applied to these img width, to fix this you can use display: block;
max-width: 100%;
and object-fit: cover;
there's no need to set the hight
the img height will be the container height.
3.To write less lines of code and don't have to use media query for the image switch between mobile and desktop, you can use the tag <picture> inside the html and determine when it should change. See the code below with your image with the picture set applied:
<picture>
<source media="(min-width:650px)" srcset="assets/image-header-mobile.jpg">
<img src="assets/image-header-desktop.jpg" alt="office workers" style="width:auto;">
</picture>
Hope it helps, happy coding!
@Semi-Square
Posted
@correlucas Hey, thanks a lot man. I was wondering about the resizing thing. It helped a lot!!
@correlucas
Posted
@Semi-Square You're welcome, happy to hear that was helpful!