Centering Logo Regardless of Screen Width?

Hello there,

What is the URL site you’re working with there?

Custom CSS maybe possible, but we would need to look at the site in order to determine next steps.

https://www.peacebazaarhk.com/

Thanks!

Hi there, any suggestions? ??

Cheers.

Hi anyone? ??

Hello?

@aleone89

@zoonini

Hey there,

Excuse the delay here – we’ve not been receiving the notifications to these replies, but this has now been resolved.

Looking at the site on a mobile, I’m seeing the logo is center aligned – do you still require assistance with this issue?

@aleone89 Hi there, thanks for the reply!

Not really… For example, on LG V20 (which is 3-4 years old), it’s aligned to the left. FYI, its screen resolution is 1440 x 2560 pixels. So it’s an issue on mobile phones with increasingly high-resolution screens.

Hi @loyukfai , got it. My phone is small, so it was centering for me, and I’d imagine @aleone89 was seeing the same thing. Here’s the CSS that centers the logo on screens that are 400px wide or smaller:

@media?only screen and (max-width: 400px) {
  .site-branding?{
    padding-bottom: 1.3rem;
    width: 100%;
}

Do you want to try pasting that into your Additional CSS, then giving it a larger width, say, 959px instead of 400px? That seems to be the next break point.

Hi there, thanks! I just tried but it doesn’t work, anything else I can try?

Cheers.

Hey there,

Would you be willing to adjust the CSS to:

@media only screen and (max-width: 960px) {
  .site-branding {
    padding-bottom: 1.3rem;
    width: 100%;
}

960px is when the mobile menu kicks in, so you may see this working from that point.

Many thanks.

Umm… Sure, but it doesn’t seem to work…. I’ve tried removed all other custom CSS and put only the suggestion but…

View post on imgur.com

(this is just illustrative, I did publish the change and use my mobile to check, still the same)

Cheers.

Hi, after studying your suggestions and the CSS file of the theme, I tried below and it seems to work…

@media only screen and (max-width: 960px) {

	.site-branding {
		width: 100%;
	}

	.site-title,
	.site-branding .custom-logo-link {
		display: block;
		padding: 0;
		text-align: center;
	}
}

Edit: Umm… Spoke too soon. Only the front page works, others don’t, any suggestion?

Edit 2: Nevermind, clearing the cache seems to be the key. Will keep watch for a few days and mark as sovled no other issues found.

• This reply was modified 1 year, 9 months ago by loyukfai.
• This reply was modified 1 year, 9 months ago by loyukfai.

Glad you’ve got it! Sorry I wasn’t clearer about needing to change the 400px to 960px. It looks good to me now!