Mis-Alignment on Header Icon on Home Page and Other Pages for Mobile View

[DavidLeong]

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>

[Lee-Strong-SEO]

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:

1. Go to the Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your current theme and click on Actions > Edit code.
4. In the Assets folder, click on your CSS file (like base.css or theme.scss.liquid).
5. Scroll to the bottom of the file and paste your CSS code there.
6. Save your changes.

Give this a shot and if the problem persists, don't hesitate to reach out for more help!

[DavidLeong]

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;
}

[Lee-Strong-SEO]

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?