Logo problems - center align and blurry

[booknerd]

I'm using the Studio theme and I'm trying to do two things:

1) I added code to allow my logo to get bigger than standard, but when I increased it, the image is getting pixelated. The file I uploaded has a much higher resolution than what it's being resized to on my store, so I don't understand what the issue is.

2) I'm trying to center my logo in the header. Studio doesn't have options to do it, so I need to code it. Unfortunately, none of the solutions on the forum are working for me.

Thanks!

[suyash1 · Accepted solution]

@booknerd - please add this css to the end of base.css file and check

@media screen and (min-width: 990px){
.header__heading{justify-self: center;}
}

[suyash1]

@booknerd - can you please share this page link?

[booknerd]

I knew I was forgetting something!

https://329543-2.myshopify.com/

[suyash1 · Accepted solution]

@booknerd - please add this css to the end of base.css file and check

@media screen and (min-width: 990px){
.header__heading{justify-self: center;}
}

[booknerd]

That got it centered. Thanks! Any idea why the logo is suddenly pixelated?

[suyash1]

@booknerd - you will need to check logo code, it might be setting image to smaller size and hence it is getting pixelated

[Natasha-Saed · Accepted solution]

I recommend you save your logo to svg this will grant high resolution image on all devices

[booknerd]

I just realized that the logo is only centered on the homepage. On all other pages, the logo is in the original spot (left aligned).

[booknerd]

@suyash1 I just realized that the logo is only centered on the homepage. On all other pages, the logo is in the original spot (left aligned).

[suyash1]

@booknerd - please add this css and check

@media screen and (min-width: 990px){
.header__heading-link{justify-self: center;}
}

[booknerd]

@suyash1 

That got the logo to the center on all the pages. Thanks!

Now I have another issue: the logo and the header menu aren't lining up. In the screenshot below, the red line is the center of the screen and the menu, the gold line is the center of the logo. So the logo needs to move to the right about 40px. I'm using code to center the logo and the menu, so I'm not sure what the issue is. Any ideas?