Mobile responsive, centered header

[drstuggi]

Hi. I would be very grateful if someone could me assist me in this:
1) How do I modify the Centric Pro theme so that my logo image is centered on mobile?
2) How do I make the header height smaller on mobile?
3) Lastly I want the logo to have a top margin, but adjusting the padding (in design palette pro) doesn't seem to work - any ideas?

I have attached my test site url

Thanks!

http://37.60.224.147/~danskoft/

[Victor Font]

1. Viewing you site on http://www.studiopress.com/responsive/, your logo is centered on all sizes of devices.
2. Change the min-height dimension in .site-header .wrap within your media queries at the bottom of your style.css.
3. Add a class to style.css for .header-image .site-title > a and set the margin-top there like this:

.header-image .site-title > a {
    margin-top: 30px;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[drstuggi]

1. Yes, sorry I didn't update my post, but I just managed to center it on my own for smaller screens although I am not quite satisfied yet: How do I move the logo further left when in full desktop mode?
2. Ok, I've added the following lines to the bottom of my style.css:

		.site-header .wrap {
		min-height: 30px;
	}

3. So I simply paste the provided code into my style.css or do I have to edit functions.php too in order to add a class?

[drstuggi]

In regards to problem no. 2: I can make the header bigger, eg. with min-height: 200px, but nothing happens below a certain point. I'm guessing I have to change minimun height of the logo.png - could you help me locate that line?

Thanks a lot for the swift and effective support!

[Author]

Posts