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?
Topic summary
Logo appears too small on mobile while desktop size is correct. Increasing the mobile logo initially broke header alignment (search and cart icons), preventing the logo from centering.
Proposed fix focused on mobile via a CSS media query (max-width: 749px). Key changes:
- Adjust header grid to three columns (grid-template-columns: auto 2fr auto) to give the logo more central space.
- Tweak icon widths (selectors: .header__icons .header__icon and .header__icon–cart .icon) and spacing to balance search and cart icons while keeping the logo centered.
Multiple iterations with screenshots refined icon size and spacing. Constraint noted: if icons remain large, the logo shifts; moving icons closer and/or slightly reducing icon size helps center the enlarged logo.
Implementation: CSS added to base.css within the mobile media query. Initial attempt didn’t take effect; a corrected version was provided and then applied via collaborator access.
Outcome: Changes are now live and functioning. Icons work correctly; the logo is larger and better centered on mobile. Status: resolved. (Screenshots were central to confirming alignment.)
@HEALINGANDHER - can you please share your website link?
@HEALINGANDHER - we can increase logo size, but then it corrupts the alignment like in screenshot
the size looks better. Can we not then move the swatch bar to the right more?
@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;}
}
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?
@HEALINGANDHER - yes it is made smaller, if they are kept bigger then logo will move to right
Can you please make them the same size? –
B
Founder & Creator, HEALING AND HER
07586 701320 | www.healingandher.com
@HEALINGANDHER - if we do not make it smaller then it will look like this
No smaller, can you move the icons closer together? Which will give more room to centre the logo?
@HEALINGANDHER - like this?
The shopping basket icon bigger to match the search button please? And the logo can go slightly smaller 
@HEALINGANDHER - shopping icon and search have same height width, any change to make it smaller will make it like previous screenshots
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!?
@HEALINGANDHER - with icons size same, adjusted bit spacing
The basket needs to come in to the left, the search icon to the right, and the logo to the right? X
@HEALINGANDHER - like this?
That looks better. Do they function correctly like that?
@HEALINGANDHER - yes they will work