how can I reduce the height of below image banner on www.10xfuel.com?
Topic summary
A user seeks to reduce the height of an image banner on their Shopify store using the Dawn theme. Multiple solutions are proposed involving custom CSS code:
Initial Solutions:
- Add CSS to
base.cssfile targeting.banner--smallwithmin-height: 43remandmax-width: 90% - Alternative approach: insert CSS in
theme.liquidfile before</head>tag
Desktop Fix:
After initial attempts don’t work, a more specific CSS selector is provided:
div#Banner-template--[specific-ID] {
min-height: 15rem !important;
}
This successfully reduces banner height on desktop.
Mobile Issue:
The desktop solution doesn’t apply to mobile devices. Additional CSS is provided for mobile screens (max-width: 767px) targeting .banner__content with min-height: 15px !important.
Ongoing Challenge:
A different user (TFisher) reports the provided code doesn’t work for their banner, indicating the solution may need customization based on specific theme implementation or banner configuration. The discussion remains open with unresolved cases.
@10xfuel Can you put below css into base.css file
@media screen and (min-width: 750px)
{
.banner--small:not(.banner--adapt) {
min-height: 43rem;
max-width: 90% !important;
margin: 0 auto !important;
}
}
Hallo @10xfuel
You can add code by following these steps to change
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid theme file
-
Paste the below code before
If you require any further information, feel free to contact me.
Best regards,
thx! I cannot find the code : is it called that way?
hallo @10xfuel
Do one thing
Hallo @Alliance
You can add code by following these steps to change
- Go to Online Store → Theme → Edit code > base.css
- Paste the below code at bottom
@media screen and (min-width: 750px)
{
.banner–small:not(.banner–adapt) {
min-height: 43rem;
max-width: 90% !important;
margin: 0 auto !important;
}
}
If you require any further information, feel free to contact me.
Best regards,
done - but I don’t see any changes in the height of the image banner.
Please apply this code
div#Banner-template–15783301709962__5835cbd9-36ee-43ca-b1ea-f81aa637c4da {
min-height: 15rem !important;
}
where should I enter this code?
base.css at bottom
1 Like
thank you! I works on the desktop version - but not on mobile. How to get the image banner height reduced on mobile too?
paste this css at base.css( at bottom )
@media screen and (max-width: 767px)
{
.banner–small:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 15px !important;
}
}
I hope your problem has been resolved.
1 Like
