All things Shopify and commerce
Looking for a fix for the mis-alignment of header icon on home page and other pages. The alignment of header icon is correct and center aligned but for other pages is off. Edited the code at theme.liquid prior to head, but dont seems to work. My website is www.mobilcablestore.com
<style>
@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link {
margin-left: 13px !important;
}
}
</style>
It sounds like you're dealing with a tricky alignment issue on your website. I've noticed that you've attempted a CSS fix within your theme.liquid file, which is a good start. However, the best practice is to add custom CSS to the end of your theme's main stylesheet for consistency and to ensure it isn't overridden.
In your case, you should locate the Assets folder in your Shopify theme code and find the base.css file (or it could be named theme.scss.liquid, depending on your theme). Add your custom CSS there, at the very end of the file.
Here's a step-by-step guide:
Give this a shot and if the problem persists, don't hesitate to reach out for more help!
Made the code edit at base.css instead. Still encountering the same. Can help?
@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link {
margin-left: 13px !important;
}
Hi David,
I've checked your website and the code is working. The CSS code is pulling your logo to the left, instead of it being centered, when the screen width is below 767px. Is this what you are trying to achieve?
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025