Shopify themes, liquid, logos, and UX
Hi, I would like to get some advice or code if possible. I upped the heading font scale size for readability, however, this pushed my logo from the centre on mobile. Is there a way to keep the size of the menu, search and cart icons but reduce their padding or something to get them to move further to the left and right so that the lgo has space to be centred again? Thank you so much. website: www.stagtis.com
Solved! Go to the solution
This is an accepted solution.
Hello @Stagtis ,
This is Amelia at PageFly - Shopify Advanced Page Builder app.
Step 1: Online Store -> Themes -> Edit Code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>
<style>
@media (max-width: 767px) {
.header {
padding: 0px 0px 0px 3rem !important;
}
.header header-drawer {
margin-left: -3rem !important;
padding-right: 3rem !important;
}
}
</style>
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hello @Stagtis ,
This is Amelia at PageFly - Shopify Advanced Page Builder app.
Step 1: Online Store -> Themes -> Edit Code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>
<style>
@media (max-width: 767px) {
.header {
padding: 0px 0px 0px 3rem !important;
}
.header header-drawer {
margin-left: -3rem !important;
padding-right: 3rem !important;
}
}
</style>
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
hi @PageFly-Amelia , this worked great thanks so much. I just moved the drawer to the right by 1 rem to taste. how could I move the cart to the left by 1 rem to match while keeping the search where it is?
Hello @Stagtis
You can try the following steps I have provided to help you solve the problem you are facing:
Step 1: Online Store -> Themes -> Edit Code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>
<style>
@media (max-width: 767px) {
.header {
padding: 0px 0px 0px 3rem !important;
}
.header header-drawer {
margin-left: -3rem !important;
padding-right: 3rem !important;
}
.header .header__icon--cart {
margin-left: -1rem !important;
}
}
</style>
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
thank you
Hi there @Stagtis
try this code
.header {
padding: 0 1rem;
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: space-between;
}
paste this code in base.css to very bottom.
If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!
hi, thanks but this only shrunk my logo
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025