How do i centre my logo on my mobile page .

Pipsandoats
Tourist
9 0 2

Hello, i am having trouble placing my logo in the centre on all of my pages I have found a code in one of the forums that work for the home page This is the code (I have pasted it in theme.liquid just above  <head>)

 

<style>
@media screen and (max-width: 767px){
h1.header__heading {
margin-left: 50px;
}
}
</style>

 

this picture is the result of this 

 

IMG_E110EB6F9DAF-1.jpeg

 

However when I go on any other page for example my view all the logs shifts back to the left side 

 

IMG_86901849D517-1.jpeg

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
5437 1308 1610

HI @Pipsandoats 

Check this one, please take out the margin you add.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (max-width: 989px){
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: center;
}
    .header--mobile-left {
    grid-template-columns: auto 2fr;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1710955990224.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Pipsandoats
Tourist
9 0 2

Hello unfortunately it did not work it comes up like this when I enter the code.

IMG_271B83D2321F-1.jpeg

Made4uo-Ribe
Shopify Partner
5437 1308 1610

Oh, I didnt tell to add in the theme.liquid. My instruction is clear, paste it on the base.css file. I just let you remove the margin you add in the theme.liqud cause it would make an issue. 

Please, follow the instruction. Thanks!

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Pipsandoats
Tourist
9 0 2

Hello, I have removed the code that I have put in and I have pasted your code in base.css however I am left with the same result I had with my code.

Made4uo-Ribe
Shopify Partner
5437 1308 1610

Hi, I see it that you remove the margin but I didnt see the code that you paste it into the base.css. Did you paste in the theme.liquid?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Pipsandoats
Tourist
9 0 2

Hello i have tried putting it in the base.css and theme liquid and both don't work for me when I notice that when I remove the code I have and enter your one it just moves the logo to how it was at the beginning more to the left than middle.