Hi! Can someone please help me centering my logo on enterprise mobile version?
My website: https://agwqx9gpmw0jm015-75243356459.shopifypreview.com
Topic summary
A user seeks help centering their logo on the Enterprise theme’s mobile version for their Shopify store.
Three solutions were provided:
-
DaisyVo’s approach: Navigate to Shopify admin → Online store → Customize → Theme settings → Custom CSS, then add CSS code targeting screens max-width 768px to center the header logo using
justify-content: center. -
Moeed’s method: Go to Online Store → Edit Code → theme.liquid file, and insert CSS code in a
<style>tag above the</body>tag with similar centering properties. -
Dan-From-Ryviu’s solution: Add CSS to Custom CSS (same path as solution 1) targeting max-width 749px, adding both
margin-left: 32pxandjustify-content: centerto the header logo.
All three solutions use CSS media queries to center the logo specifically on mobile devices. Each responder included screenshots demonstrating the implementation steps and expected results. The discussion remains open with no confirmation from the original poster about which solution worked.
1 Like
Hi @BergEvent
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (max-width: 768px){
.header__logo {
justify-content: center !important;
}
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
Hey @BergEvent
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @BergEvent
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
. header .header__logo {
margin-left: 32px;
justify-content: center;
}
}
