Change header logo img size for mobile only

Solved
Highlighted
New Member
5 0 0

My store: https://heavysoundlabs.myshopify.com/

How can I make the header logo render correctly for mobile?

0 Likes
Highlighted
Shopify Partner
2823 618 757

Hey @heavysoundlabs,

Your store is password protected. Please share the password.

I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
New Member
5 0 0

pw: ----------------

0 Likes
Highlighted

This is an accepted solution.

 

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<style>
@media (max-width: 1046px){
.site-header__logo-link {
max-width: 200px;
width: 100%;
margin: 0;
}
}
@media (max-width: 600px){
.site-header__logo-link {
max-width: 30vw;
max-height: 12vw;
margin-top: 20px;
width: 100%;
}

.arrow-holder{
display: none;
}
}
</style>

 



let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like