Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I didn't design this site and am now trying to help with it. The logo isn't centralised on mobile and shopify support said:
I had a look at your theme, and currently, there isn’t a direct option to center the logo in the mobile view through the theme settings. I also tried checking further, but since you’re using a third-party theme, there are some system limitations that prevent me from fully accessing or editing the theme on my end.
To center the logo on mobile, some custom coding would be needed. As I am not trained in coding, I’d recommend reaching out to your theme developer they should be able to help make this change for you. Alternatively, you can also post your request in the Shopify Community.
Could anyone help me please? The website is shown in the image as it won't let me post it here.
Hi,
Hope this will help
- At theme.css or base.css or styles.css. Add css code at bottom
Code example
/* Center the logo on mobile */
@media screen and (max-width: 767px) {
.site-header__logo,
.header-logo,
.logo,
.your-logo-class {
margin: 0 auto;
text-align: center;
display: block;
}
}
Hi @DurgaTimber ,
To make the logo center, please copy the below CSS and Go to Themes >> Edit code >> and paste it to base.css and theme.css
If you stuck somewhere, please reply here or feel free to message me!
Hi, Hope this will resolve
@media (max-width: 479px) {
.color_scheme .header_left {
width: 100%;
margin-right: 0;
margin-bottom: 15px;
justify-content: center;
align-items: center;
display: flex
;
}
}
Hello @DurgaTimber
I have experience this also in my store but i got it rectified by my shopify marketing agency, you can try them out also