Keep custom header centered in Minimum Pro?

[Embellished Page]

While the small custom header is centered when the site is viewed in full size, it jumps and stays left aligned when viewed with a narrower width. How do I keep it centered no matter what the view?

http://www.eileenpage.com

[sethbahookey]

Hey I think you need to adjust your media queries...

Currently this is what header looks like when it's maxed out..

#header {
  background-position: top center!important;
  margin: 0 auto;
  min-height: 200px;
  overflow: hidden;
  width: 312px;
}

BUT when you minimize it down your media query takes priority and you get...

@media only screen and (max-width: 1200px)
.wrap, #header {
  width: 960px;
}

Actually when I turn off the width: 960px; in google dev tools that seemed to fix it. Try going into your CSS file and finding that media query and delete/comment it out and see if that fixes it 🙂

[Embellished Page]

Hi Seth. I deleted the line about .wrp, #header (not sure what you mean about commenting it out)

So now I've got:

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

#content {
width: 560px;
}

.post-type-archive-portfolio .portfolio {
width: 280px;
}

}
But it hasn't fixed the problem

Suggestions? (I'm not coding savvy)

Thnx

[Author]

Posts