How do I centre my heading logo on mobile?

Shopify Discussion
1

Hi there, I have tried uploading a centralised image but it is still on the left!

Does anyone have any ideas? https://durgatimber.com/

image0
image0295×640 410 KB

2

Hello @DurgaTimber ,

I hope you are well!

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media screen and (max-width: 767px) {
.header_wrap2.header_left {
text-align: left !important;

}

}

This will make the logo center

image
image394×746 64.8 KB

3

Typo above, should be

.header_wrap2.header_left {
  text-align: center;
}
4

Hey @DurgaTimber,

Thanks for posting your Query to Shopify community.

In order to center the logo you need to follow these steps.

Go to Shopify Admin >> Online Store >> themes >> Edit Code >> style.scss.css

Go to end of this file and paste the following code that I shared below.

a.header_logo {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

Results:

durga
durga354×558 134 KB

If you need more help then you can reach me out.

Thanks

5

this works better, follow it.
.header_wrap2.header_left { text-align: center; }

6

Hello @DurgaTimber,

You can add the following code into your base.css file:

@media screen and (max-width: 479px){
.header_wrap2.header_left {
        text-align: center;
}
}

Here is the result:

mobile text align
mobile text align361×738 145 KB