Center align mobile header text

GoSmoothSHOP
Excursionist
17 1 9

Hi!

 

Could someone help me center align the mobile header text (see photos) ? On desktop this text is center aligned but on mobile it is left aligned.

 

Shop URL: https://go-smooth.com/

 

Thanks in advance!

 

Mobile.pngDesktop.png

Replies 9 (9)
DMT-Andre
Shopify Partner
19 2 18

Hey

 

Go to Online Store > Themes > Edit Code

 

You need to find your CSS file and change the following code:

@media only screen and (max-width: 600px)
.top-bar.navbar div#top-block-header__top-bar-0 p {
    text-align: left;
    padding-bottom: 0;
}

To

@media only screen and (max-width: 600px)
.top-bar.navbar div#top-block-header__top-bar-0 p {
    text-align: center;
    padding-bottom: 0;
}

 

Let me know if this helps you or if you need more help finding the code.

 

I would also suggest you duplicating your theme before making changes in case something breaks so you can go back to the working version.

 

Thanks,

Andre

Need expert help with your Shopify Website? Message me or contact the team.
GoSmoothSHOP
Excursionist
17 1 9

Thanks for your reply!

 

I have made the change in the CSS but now my whole theme crashes when I preview it (not a live theme).  Do you know how I can fix this?

 

Screenshot 2021-11-19 at 13.09.31.png

DMT-Andre
Shopify Partner
19 2 18

Hey

 

Sorry about that - I forgot the curly brackets! Here's the revised code:

 

@media only screen and (max-width: 600px){
.top-bar.navbar div#top-block-header__top-bar-0 p {
    text-align: center;
    padding-bottom: 0;
 }
}

 

Let me know if that works

 

Thanks

Need expert help with your Shopify Website? Message me or contact the team.
GoSmoothSHOP
Excursionist
17 1 9

With this new code the theme still crashes. Below is the code I have in styles.scss.liquid.

 

@media only screen and (max-width:600px){
  .language-drop {
      float: left;
      right: 100px;
      position: absolute;
      top: 8px;
        padding-right: 0;
    margin-top: 5px;
  }
  .top-bar.navbar{
    div#top-block-header__top-bar-1 {
      display: none;
    }
    div#top-block-header__top-bar-0 {
      width: 100%;
      min-width:100%;
    }
    div#top-block-header__top-bar-0 p {
    text-align: center;
    padding-bottom: 0;
 }
}

 

GoSmoothSHOP
Excursionist
17 1 9

Hi @DMT-Andre! Were you still able to see how I can solve this problem?

DMT-Andre
Shopify Partner
19 2 18

Hey

 

Try replacing the broken code with this:

@media only screen and (max-width:600px){
  .language-drop {
      float: left;
      right: 100px;
      position: absolute;
      top: 8px;
      padding-right: 0;
      margin-top: 5px;
  }
  div#top-block-header__top-bar-1 {
    display: none;
  }
  div#top-block-header__top-bar-0 {
    width: 100%;
    min-width:100%;
  }
  div#top-block-header__top-bar-0 p {
    text-align: center;
    padding-bottom: 0;
  }
}

 

Let me know if that works!

 

Thanks,

Need expert help with your Shopify Website? Message me or contact the team.
GoSmoothSHOP
Excursionist
17 1 9

Hi @DMT-Andre!

 

I'm still having the same issue with this new code. This is a preview of my store with the broken code.

DMT-Andre
Shopify Partner
19 2 18

Hey

 

There must be something else broken when you duplicate a theme?

 

There's no way changing the word 'left' to 'center' disables the whole websites CSS.

 

If you duplicate the original theme again does it appear normal when you preview it?

 

Thanks,

Need expert help with your Shopify Website? Message me or contact the team.
GoSmoothSHOP
Excursionist
17 1 9

Yes, the theme looks fine if I duplicate it again from the live theme. I tried it 3 times now.

 

However, I get this message when I open the edit code window:

 

'SCSS support is outdated in themes. Convert .scss and .scss.liquid files to .css or .css.liquid for better performance of your online store and theme editor.'

 

Does this perhaps have anything to do with it?