Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What specifically doesn’t centre?
When you look at the site on an iPhone or an iPad it’s not sizing to fit the browser. It looks like it is cutting off the right side of the page.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
There’s a static width of 990 pixels set to your <div id="header"> element. Replace that with an elastic value like percentage.
Thanks for your help. Ill give that a shot and see what happens. Ill let you how it works out.
Andrew,
That didn’t work but I see where you are going with it. I went back an examined the original CSS file that came with the theme and it in fact works fine on the iPad and phone. It resizes with the screen. The big change I made to the style sheet is I wanted to make the header a fixed position header so the content would scroll under the header leaving it always in place at the top of the page. Here is the two code comparions (I have tried everything and can’t figure out what to change):
Fixed header code:
#header {
position: fixed;
top: 0;
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 1);
z-index: 10;
height: 148px;
width: 990px;
}
#content-box {
padding: 130px 0 0 0;
}
#masthead {
padding: 20px 0 0 0;
}
Original header code:
#header {
margin: 0 0 28px;
}
#masthead {
padding: 28px 0 0 0;
}
Any suggestions?
Thanks
MC
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What if you set the width of 90% instead of 990px?
