I cannot centre align the logo properly for tablet/mobile devices

HTML & CSS
1

This is a link of my site . On mobile the logo is centre aligned . But when the page loads the logo moves to left and when the page is fully loaded then the logo moves to the centre . Can anyone tell me what is causing that . Is there any css solution to fix this problem ?

2

There’s this selector in your CSS:

.ast-header-break-point .site-header .main-header-bar-wrap .site-branding

That .ast-header-break-point is on the body element. When the page loads, that class is not on the page, so the logo is on the left, but when that class gets added by Javascript, it then moves to the center. That’s due to this CSS.

.ast-header-break-point .site-header .main-header-bar-wrap .site-branding {
    -js-display: flex;
    display: flex;
    flex: 1;
    align-self: center;
}

The obvious fix is to just not rely on that Javascript class to center the logo, but I’m not sure what all you have going on in this site :slight_smile: .

2 Likes
3

I can’t quite figure out which css class i should use to centre the logo . On desktop the logo should on left side but for tablet and mobile it should be centre aligned

4

.ast-logo-title-inline .site-logo-img {
padding-right: 0!important;
margin: auto;
}

This is the code i have used to center the logo

5

Imagine the logo is still to the left (before getting that JS class added). You’re wondering why the logo won’t center with the above code.

It’s because the .site-branding div element is not full width, which means your auto margin attempt is for nothing because there’s nothing to center it inside. If a box is 200x200, and the image inside is 200x200 with auto margins, that’s just pointless because there’s no room for it to center since it is essentially the full width of the container box :slight_smile: .

4 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.