Dawn 7.0.0 theme – mobile banner image cut off on different mobile devices

Store Design
, ,
1

Hi,

I am using Dawn 7.0.0.

I have a different image banner for desktop and mobile. When I test how it looks on different mobile devices, sometimes the mobile banner image is cut off (by around 20px or so).

I used this code to get the different banners to show:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

I’ve attached a file to show how it should look and how it looks on some devices.

Does anyone know how to make the mobile banner image the correct size no matter what device is being used to view it?

Thanks!

2

Hello @Shaner123 ,

Glad to support you today.

To can fix that issue on mobile, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1673321414030.png
GemPages_0-1673321414030.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

Eg:

GemPages_1-1673321752296.png
GemPages_1-1673321752296.png1140×901 45.1 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

3

Yes! Thank you so much for your quick response :slightly_smiling_face:

4

Your kind words have just made my day :heart_eyes: .