@BeinRain06
Posted
Amazing Scurlly you went through this sunnyside landing page and it looks good on mobile.
One way to display different images based on mobile and desktop is to use ✌ two different boxes container one for the img mobile and the other for the img desktop and in media queries. E.g: @media (min-width: 210px) {
.img-desktop {
display :none
}
. img-mobile {
width :100%;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 960px) {
.Img-mobile {
display :none
}
. img-desktop {
width :100%;
height: 100%;
object-fit: cover;
}
}
Don't forget you have to put your img in a container div for each case and give that div a specific width and height., set positioning.
And after that the above code given first with specificly the property object-fit:cover will handle a suit view of your image
Hope that this will be helpful and give you a hint for improving the view of your image in future projects Scurlly.
Marked as helpful
