Reduce size of logo drawer and banner on mobile view - Dawn Theme

[Julietteweb]

Hello,

I wish I could reduce the size of my logo, drawer and banner on the mobile view.

All I can do on dawn Theme is adjusting the size on desktop in the edit of online store. 

How could I ajust this settings?

Here is the link of my website : https://ancestraathletes.com

Thank you for your help!

[Made4uo-Ribe]

Hi @Julietteweb 

PLease more specific. Or can provide an image which one you like to reduce? The Banner itself or the text? Thanks!

[Julietteweb]

Hi @Made4uo-Ribe ,

Thank you for taking the time to respond !

I'd like to reduce the size of the logo and the drawer design on the mobile header (circled in blue on the screenshot). I'd also like to be able to reduce the height of the header itself (in purple on the screenshot) on the mobile version.

[GTLOfficial]

Hello @Julietteweb 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.header__heading-logo {
max-width: 70%;
}
.header {
padding: 5px 3rem 5px 3rem;
}
.header__icon .icon {
height: 1.5rem;
width: 1.5rem;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Julietteweb]

Hello @GTLOfficial 

I'm sorry I didn't see your answer earlier.

I added the code and it worked, but the shopping cart symbol became unreadable. (in yellow on the screenshot)

I'd like to reduce the space between the drawer and the logo (in blue) and I'd like to move the drawer and logo further to the left of the header (in red on the screenshot)

Thanks a lot for your time

[GTLOfficial · Accepted solution]

Hello @Julietteweb 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

@media screen and (max-width: 749px) {
header-drawer {
margin-left: -3.2rem;
}
.header--mobile-left .header__heading-link {
margin: -6px;
}
.header__icon--cart .icon {
height: 4.4rem !important;
width: 4.4rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Julietteweb]

Hello @GTLOfficial 

I apologize for my late reply.

That did work ! Thank you for your time and your help !

[GTLOfficial]

Happy to help you...!!!
That would be great if you can buy me a pizza for my work in community.

[Made4uo-Ribe]

Thank you for the info, and sorry I didnt notice your reply here. 

Try this before, adding another code. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (max-width: 749px) {
.header__heading-logo {
    width: 80%;
}
.header__heading-link {
    padding-bottom: 0;
    padding-top: 0;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!