How can I center align my mobile header text?

[GoSmoothSHOP]

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!

[DMT-Andre]

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

[GoSmoothSHOP]

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?

[DMT-Andre]

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

[GoSmoothSHOP]

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]

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

[DMT-Andre · Accepted solution]

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,

[GoSmoothSHOP]

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]

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,

[GoSmoothSHOP]

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?