Mobile logo is too big

Highlighted
New Member
2 0 0

Hello,

I have tried all the coding suggestions in the other threads that I could find in the Shopify community and nothing is working. My mobile logo is too big and overlaps with the menu and cart icon.

I would like to make it smaller while keeping desktop at the current size.

Thank you! 

URL: www.commonbriarwellness.com

pw: twelveonedesign2020

0 Likes
Highlighted

Hello @twelveonedesign 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 575px) {
.header-wrapper .site-header__logo-image img {
	margin: 0 auto;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 0
I put the code in the file you suggested and it did not work. I have tried
codes like this previously that I saw in other threads and none of them
have worked.
0 Likes
Highlighted
Excursionist
11 1 1

This is not the best way but is a solution for you. 

1. Click on "Online Store" link (left side - Shopify dashboard)

2. Click on "Actions" button and click on "Edit code".

3. Go to "Layout" folder and click to open the theme.liquid file

4. Before the tag "</head>" ends, paste this code:

<style>

@media screen and (max-width: 767px){

.site-header__logo-image img{

        max-width: 200px !important;

}

}

</style>

 

Contact me if you need any help or a professional solution.

0 Likes
Highlighted

Hello @twelveonedesign 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 575px) {
.header-wrapper .site-header__logo-image img {
	margin: 0 auto;
	max-width: 220px !important;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes