How can I enlarge my logo size on mobile view?

[HEALINGANDHER]

Hi,

I’ve asked this question a few times but no response?

My logo is the right size desktop view but too small on mobile. I’ve checked the discussions but nothing works for mobile view?

[suyash1]

@HEALINGANDHER - can you please share your website link?

[HEALINGANDHER]

www.healingandher.com

[suyash1]

@HEALINGANDHER - we can increase logo size, but then it corrupts the alignment like in screenshot

[HEALINGANDHER]

the size looks better. Can we not then move the swatch bar to the right more? 

[suyash1]

@HEALINGANDHER - please check screenshot below, if it is fine then you can add this code to the very end of base.css file and check

@media screen and (max-width:749px){
.header__icon, .header__icon--cart .icon {width: 3.4rem;}
.header {grid-template-columns: auto 2fr auto;}
}

[HEALINGANDHER]

Has the basket been made smaller? From the screenshot the basket looks smaller? Can the search icon and the basket be the same size, moved slightly towards the left, so the logo is centered?

[suyash1]

@HEALINGANDHER - yes it is made smaller, if they are kept bigger then logo will move to right

[HEALINGANDHER]

Can you please make them the same size? --
B
Founder & Creator, HEALING AND HER
07586 701320 | www.healingandher.com

[suyash1]

@HEALINGANDHER - if we do not make it smaller then it will look like this

[HEALINGANDHER]

No smaller, can you move the icons closer together? Which will give more room to centre the logo?

[suyash1]

@HEALINGANDHER - like this?

[HEALINGANDHER]

The shopping basket icon bigger to match the search button please? And the logo can go slightly smaller 🙂

[suyash1]

@HEALINGANDHER - shopping icon and search have same height width, any change to make it smaller will make it like previous screenshots

[HEALINGANDHER]

Ok so can they be made the same as they don’t look the same, then the logo slightly smaller but bigger than what it is on my live site!?

[suyash1]

@HEALINGANDHER - with icons size same, adjusted bit spacing

[HEALINGANDHER]

The basket needs to come in to the left, the search icon to the right, and the logo to the right? X

[suyash1]

@HEALINGANDHER - like this?

[HEALINGANDHER]

That looks better. Do they function correctly like that?

[suyash1]

@HEALINGANDHER - yes they will work

[HEALINGANDHER]

How can I see live?

[suyash1]

@HEALINGANDHER - add this css to the end of your base.css file and check

.header{grid-template-columns: auto 2fr auto;}
.header__icons .header__icon, .header__icon--cart .icon {width: auto;}

[HEALINGANDHER]

Hi,

this code didn’t work?

[suyash1]

@HEALINGANDHER - it should work, or can you add me as collaborator? I will make sure that it works

[suyash1]

@HEALINGANDHER  try this

@media screen and (max-width:749px){
.header{grid-template-columns: auto 2fr auto;}
.header__icons .header__icon, .header__icon--cart .icon {width: auto;}
}

[HEALINGANDHER]

Please can you request! Thank you!

[suyash1]

@HEALINGANDHER - i sent the request

[HEALINGANDHER]

Accepted thank you!

[suyash1]

@HEALINGANDHER - it is working now, please check, if you have any issues then you can DM or send email for quick communication.