How can I resize the main banner on the Dawn theme for desktop?

Solved

How can I resize the main banner on the Dawn theme for desktop?

Catchin
Tourist
8 0 2

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!

Accepted Solution (1)

Kani
Shopify Partner
468 125 232

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 */

Kani_0-1660700034296.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Replies 4 (4)

Kani
Shopify Partner
468 125 232

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 */

Kani_0-1660700034296.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Catchin
Tourist
8 0 2

Hi @Kani,

 

Thanks so much for your help!

 

Cheers.

Adeelaak
Visitor
1 0 0

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! 

Cedcommerce
Shopify Partner
718 77 116

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here