Design comparison
Solution retrospective
How to make a div separate images on mobile and desktop? How to give proper height to the div when setting the background image in CSS?
Community feedback
- @BeinRain06Posted about 1 year ago
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 helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord