How can I reduce the height of my mobile banner image?

Store Design
,
1

Hi

I want to shorten my banner image on mobile. What must I do?

2

Hi @NGM2022
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

www.dentalgoodbuys.com

4

Hi @NGM2022

Add this code at the bottom of Theme > Edit code > assets > base.css file

@media screen and (max-width: 749px) {
	.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
	height: 30vh;
	}
}

Try it and let me know

5

code.jpg
code.jpg1503×668 76.3 KB

I add the code at the bottom of the base file, save, and see no change on mobile. Am I placing the code badly?

6

hi @NGM2022
The code you add is correct, now you can check how it work on live view.

7

i did that, it did not work

8

Hi @NGM2022
Just checked and found that the code is override by other
please try to replace with this

@media screen and (max-width: 749px) {
	.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
	height: 30vh!Important;
	}
}
1 Like
9

it works. thank you