@nmnjnklc
Posted
To get that mobile design, try it like this:
<div class="illustration-container">
<img class="mobile" src="./images/illustration-woman-online-mobile.svg">
<img class="desktop" src="./images/illustration-box-desktop.svg">
</div>
and the css would be:
.illustration-container {
width: 50%;
position: relative;
min-height: 32.88rem;
background-image:
url(./images/illustration-woman-online-desktop.svg),
url(./images/bg-pattern-desktop.svg);
background-position:
left -5.2rem top 5.8rem,
left -36rem top -16.8rem;
background-repeat:
no-repeat,
no-repeat;
}
.illustration-container img {
position: absolute;
top: 14.3rem;
left: -6rem;
}
@media only screen and (max-width: 375px) {
.illustration-container img.desktop {
display: none;
}
.illustration-container img.mobile {
display: block;
position: absolute;
top: -6.6rem;
left: 0;
}
.illustration-container {
position:relative;
background-image: url(./images/bg-pattern-mobile.svg);
background-position: left 0rem top 0vh;
background-repeat: no-repeat;
background-size: contain;
width: 80%;
min-height: 8rem;
}
}
Hope this helps. Happy coding!
Marked as helpful
@Joatancarlos
Posted
@nmnjnklc thaaaaank you!!! It worked perfectly.
@nmnjnklc
Posted
@Joatancarlos I'm glad I could help. Keep up the good work!