Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi team,
I just cant seem to work with one out...i am using the dawn theme and cant find where to sort out banner sizing for desktop. It looks fine on mobile but desktop its to big so just looking to find out where to change this?
My website is : www.catchinsnags.co.nz (the image that i am having issue with is the banner right now).
Any help would be greatly appreciated, I'm pulling my hair out with this one!
Thanks!
Solved! Go to the solution
This is an accepted solution.
Hi @Catchin
1: Online store > themes > Actions > Edit code > Assets > base.css
2: paste code at last
/*
================================
remove it when you change banner
================================
*/
@media screen and (min-width: 750px){
#Banner-template--15220986445991__image_banner .banner__media {
background: white!important;
}
#Banner-template--15220986445991__image_banner .banner__media::before {
padding-bottom: 24%!important;
}
#Banner-template--15220986445991__image_banner .banner__media img {
max-width: 500px!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
margin: auto!important;
}
}
/* remove it when you change banner */
This is an accepted solution.
Hi @Catchin
1: Online store > themes > Actions > Edit code > Assets > base.css
2: paste code at last
/*
================================
remove it when you change banner
================================
*/
@media screen and (min-width: 750px){
#Banner-template--15220986445991__image_banner .banner__media {
background: white!important;
}
#Banner-template--15220986445991__image_banner .banner__media::before {
padding-bottom: 24%!important;
}
#Banner-template--15220986445991__image_banner .banner__media img {
max-width: 500px!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
margin: auto!important;
}
}
/* remove it when you change banner */
Hi can I use this code for a slideshow banner?
my slideshow banner images are great on mobile but too large on desktop and they look blurry!
Hello @Catchin,
The issue is arising because the height of the image is too large.
To fix it you can add below code in the image-banner.liquid.
<style>
@media (min-width:820px){
.banner--small:not(.banner--adapt) {
min-height: 32rem;
}
</style>
Add this code in the base.css at last
@media (min-width:820px){
.banner--small:not(.banner--adapt) {
min-height: 32rem;
}
Hope it helps, let us know if you need any help.
Regards,
Team CedCommerce
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025