[husker]

I want to center the #site-header so that site-title and site-description are centered when in Ipad Portrait mode.

I have tried and tried and can not get it to move.

http://bayareahuskers.org/wp/

Brian

[Pratik]

Hi @husker,

Just need some further information. Do you want it to be centered on all devices, or just on I-pad portrait mode?

Also, do you want the search and social icons to be pushed down as the site title and description is centered?

Let me know and I will provide you with custom CSS.

Regards,
Pratik

[husker]

Hi Pratik,

For sure I need to center #site-header for Iphone Portrait and Landscape and Ipad Portrait.

Since desktop and Ipad Landscape are 3 wide, they look ok with a left #site-header.

I realize this may be involved, but I like where the social icons are located on all devices currently.

Brian

[Pratik]

Hi Brian,

Let me be sure if this is the case: You want the site-header to be centered in Iphone Portrait and Landscape and Ipad Portrait. The social icons will remain on the same site, but will be pushed below the site header because it wont be possible if not pushed down.

You can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

@media screen and (max-width: 1100px) {
	#site-branding,
	.mobile-menu-one #site-branding,
	.mobile-menu-two #site-branding,
        #site-header,
        #site-logo {
            width: 100%
        }
        #site-branding {
	    text-align: center;
	}
}

Let me know if this solves your issue.

Regards,
Pratik

[husker]

Hi Pratik,

Yes the code got me almost there.

I had to change the max-width to 990px so that Social Icons would stay in line on Ipad Portrait mode and not center below. It stays looking like the desktop.

Then I noted the Site Title and Site Description were not exactly centered but close.

I then set padding to 0 0px; for #site-branding in the (iPad Portrait) CSS Code. This moved them closer to center.

It seems the Site Title maybe still be a bit left and not perfectly centered. Is there any more padding that could be affecting the Site Header? It is close.

Maybe it is just my eyes.

http://bayareahuskers.org/wp/

Thanks

Brian

[Pratik]

Hi Brian,
The Site Header is exactly centered for max-width 990px right now. The only padding is on header and that too top and bottom padding only.

[Author]

Posts