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

DavidLeong
Tourist
26 0 2

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>

Replies 3 (3)

Lee-Strong-SEO
Shopify Partner
127 19 25

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!

Strong SEO

This simple trick can boost your store to the top of Google - Try it Now
DavidLeong
Tourist
26 0 2

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
Shopify Partner
127 19 25

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?

Strong SEO

This simple trick can boost your store to the top of Google - Try it Now