Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an 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,
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
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?
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
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;
}
}
This is an 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,
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.
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,
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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024