Dawn Theme- Resizing banner image To Fit Mobile Screen

[skinnystick]

Hi, I would like to change the size of my banner on the mobile version to something like this:

my page url: https://skinnyartspace.com/

[websensepro]

Go to Online Store
2) Edit Code
3) Find base.css file

4. Add the following code in the bottom of the file

@media only screen and (max-width: 600px) {
.banner__media.media.banner__media-half {
    height: 50rem !important;
}
}

[Dan-From-Ryviu]

Hi @skinnystick

Go to your Online store > Themes > Edit code > open theme.liquid file, add code below under tag

[skinnystick]

Thank you. Is there a way to make the word shift to the centre of the page?

[Dan-From-Ryviu]

Hi @skinnystick

Please add this code also

[skinnystick]

Hi, it doesn’t work.

[Dan-From-Ryviu]

Hi @skinnystick

Please update code and check again

[skinnystick]

It works. Thank you

[Dan-From-Ryviu]

Very welcome

[graceatsabun]

Hi there, I tried your code. But somehow, it doesn’t solve my issue. Can you please help? My website is www.maisonsabun.com

[Dan-From-Ryviu]

Could you explain your request?

[graceatsabun]

I wanted my mobile banner to be exact like this size. I tried to copy your code and paste it in my theme.liquid file, however it doesn’t work. Can you please help?

[Dan-From-Ryviu]

You can try to use this code instead

[graceatsabun]

Thank you so much, it works perfectly now!

[Dan-From-Ryviu]

You are very welcome!