hitmorecode• 6,230
@hitmorecode
Posted
Nice well done. I took a look at your page and I have some suggestions this will also solve your issue.
- The issue with media query is, because you used % for width and height. I made some changes (see below). What's commented out you can delete. Lines with
**
these are the changes I've made
body{
display: flex;
justify-content: center;
align-items: center;
Font-size: 15px;
background: hsl(233, 47%, 7%);
color: white;
font-family: 'Inter', sans-serif;
min-height: 100vh; **
}
.container{
display: flex;
align-items: center;
background: hsl(244, 38%, 16%);
/* width: 800px; */
/* height: 330px; */
border-radius: 10px;
/* position: relative; */
/* top: 180px;*/
}
.right img{
width: 400px; **
border-radius: 0 10px 10px 0 ;
}
.right{
height: 330px; **
/* flex: 1; */
position: relative;
width: 400px; **
background-image: url("image-header-desktop.jpg");
background-size: cover;
}
.right::before{
background-color: hsla(277, 64%, 61%, 0.8); **
mix-blend-mode: multiply; **
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* z-index: 100; */
content: "";
}
.left{
padding: 45px;
width: 400px; **
height: 330px; **
}
@media (max-width:805px){ **
.container{
flex-direction: column-reverse;
/* transform: translateY(40px); */
width: 400px; **
}
}
Marked as helpful
0