Logo Bigger on Mobile Device DAWN

[jameschef86]

I've tried a few times to get this to work. My logo in the header of my website is great on my laptop at home, but on the mobile its about 50 percent too small. I'd like to exactly double it in size on mobile. 

I tried some code last time in the base.css but it just flattened the logo and made it larger. I would to scale it up exactly 100 percent.

hudsonmealco.com

password is "password"

Thanks

[David_SHT]

Hi @jameschef86 

This is David at SalesHunterThemes.
To increase the header logo size on mobile

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

@media(max-width: 749px){
.header {
padding-inline: 10px;
grid-template-columns: 1fr 5fr 1fr;
}
}

[ZenoPageBuilder]

Hello @jameschef86 👋

You can add this code to base.css

@media (max-width: 989px) {
    .header__heading-link {
        padding: 0;
        margin: 0 -16px;
    }
}

The result

Hope that helps!

[eFoli-Marvic]

@jameschef86 

 add this code to your base.css file.

Navigate to the online store >> Click edit theme code.

Now find base.css and paste the following code:

@media(max-width:980px){
.header {
    padding-inline: 5px !important;
    grid-template-columns: 1fr 7fr 1fr !important;
}
}

[jameschef86]

 

This code seemed to work the best, but there was this line that is now there between the picture. Any way to get rid of that? Much thanks!

[eFoli-Marvic]

@jameschef86 

To get rid of the line please add the code into base.css file

@media(max-width:980px){

.section-header.shopify-section-group-header-group{
    margin-bottom: 0 !important;
}
}