A user seeks guidance on image banner dimensions for both desktop and mobile displays, asking if it’s possible to use two different images for each platform.
Recommended approach:
Implementation via CSS:
@media only screen and (max-width: 480px) applies styles only when screen width is below 480px@media screen and (min-width: 750px) applies styles for screens above 750pxThe response includes screenshots demonstrating the browser inspection process but doesn’t specify exact banner dimensions, focusing instead on the methodology for determining appropriate sizes.
Hi I want to make my image banner adapt to desktop and mobile. I would like to know the dimensions I need to put my image in to make it fit desktop and mobile. I’ve read that you can use 2 different images for mobile and dekstop. Can someone help me with this?
website url: https://thesnoozy.com/
Hi @GeorgeRizos
Please follow these steps:
Step 2: Select the phone icon in the window that displays the mobile size. Here you can choose the size of the phone you want like an iPhone or Samsung, and next to it will display the size Width*Height.
Normally, to design the web for mobile, the developer will use the default width of 414px. To CSS for each screen size, you use responsive CSS. Most commonly, you use @media, for example:
@media only screen and (max-width: 480px){
(code css)
}
That is to apply only when the screen is below 480px in width, or:
@media screen and (min-width: 750px){
(code css)
}
The above code applies to screens above 750px.
You can read more at https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I hope that it’s useful for you.