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/
Topic summary
A user seeks to resize their Dawn theme banner image specifically for mobile screens, providing a reference image of their desired layout.
Initial Solutions Offered:
- One suggestion involves adding CSS code to the base.css file targeting
.banner__mediawith a max-width media query and height adjustment - Another approach recommends inserting code into the theme.liquid file under the
<head>tag
Follow-up Customization:
The original poster requests centering text on the page. A code snippet is provided to address this, which successfully resolves the issue after an initial attempt fails and requires updating.
Similar Issue Resolution:
Another user encounters the same banner sizing problem on their website (maisonsabun.com). The initial code doesn’t work for them, but an alternative code solution is provided that successfully fixes their mobile banner display.
Status: Resolved for both users through custom CSS/HTML modifications to the theme files.
Go to Online Store
2) Edit Code
3) Find base.css file
- 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;
}
}
Hi @skinnystick
Go to your Online store > Themes > Edit code > open theme.liquid file, add code below under tag
Thank you. Is there a way to make the word shift to the centre of the page?
Hi, it doesn’t work.
It works. Thank you
1 Like
Very welcome
Hi there, I tried your code. But somehow, it doesn’t solve my issue. Can you please help? My website is www.maisonsabun.com
Could you explain your request?
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?
You can try to use this code instead
Thank you so much, it works perfectly now!
1 Like
You are very welcome!