Hi, i use theme premium (wwarehouse) wanting to central my logo for mobile phone as it is currently to the side
It actually looks great where it’s at.
here is the link
Hey @pnsempire
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.header__inner {
justify-content: space-between !important;
}
.header__action-list {
margin-left: 0 !important;
}
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
Hey thanks for the reply, that still isnt fully in the middle, how can i get it fully in the middle
Hello @pnsempire
Please kindly try this code I attach below by adding in theme.css file and see if it works on your store mobile port. If it works, it should look like the image I share here:
<style>
.header__logo {
margin-left: 2em ！important;
}
</style>
Hey, tried however it doesnt work
tried on the header, doesnt seem to work i cant even publish it. can you please advise
May I know if your theme contains related codes already? If so, you can add below code inside related code patterns directly, and it will work as well.
.header__logo {
margin-left: 2em ！important;
}
how do i check that?
You can check by searching with in theme.css to see if it exists already. If so, you can add my shared codes inside and content, so that the code will work correctly.
Use this css
/* Center logo on mobile (Warehouse Premium ww ar ehouse) / @media (max-width: 749px) { / Center the logo image inside its container */ .site-header__logo, .header__logo, .logo, .site-header__logo-img { display: block; margin-left: auto; margin-right: auto; float: none; text-align: center; }
/* If the header uses a flex container, center items in the header row */ .site-header__wrap, .header__inner, .header__bar { display: flex; justify-content: center; align-items: center; }
/* Optional: ensure nav/menu doesn’t push logo off-center */ .site-header__right, .header__icons, .header__menu { justify-content: center; } }