CODEWITHSUNDEEP
wordpress
user3359955
user3359955

Reputation: 5

Logo center in responsive website?

Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?

link to site

Using this code at the moment;

header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}

Many thanks

Upvotes: 0

Views: 79

Answers (2)

raglan
raglan

Reputation: 74

These two lines

display: block;
margin: 0 auto;

are a good place to start to center something.

Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.

There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.

Upvotes: 1

Stewartside
Stewartside

Reputation: 20905

Try this for your CSS

header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}

No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.

I tried the code out on your website so it should work. Hope it makes sense.

Upvotes: 0

Related Questions