So, it now seems that the problem is in my Lander child theme. When I activate the Simone theme it is resolved but when I go back to the Lander theme the post-meta information is under the blog post content. I have attached an image of the problem.
Also, I have tried trouble-shooting by working through and removing each file in the child theme to see which one is the culprit, but the post meta remains covered by the post content unless I change themes. Weird.
Any suggestions?
A further note….the blog post content stays centred on my phone and on my tablet. I am thinking this is a media query issue of some sort.
I have added my lander-styles sheet code below, but I am really not convinced that this is the problem because the issue is on the blog page which should not take on the lander-page styling. It is interesting to note that the blog page has a page attribute menu but no page template drop down.
This is some of the code from the lander-style.css
`.shifted {
margin-top: 54px;
}
@media screen and (max-width: 1539px) and (min-width: 1160px){
.content-area.lander-page {
margin-left: 0;
padding-left: 0;
}
}
.lander-page : entry-content {
position: relative;
max-width: 100%;
padding: 0;
margin: 0;
}
.indent {
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 1099px) {
.indent {
margin: 0;
padding: 0 4rem;
}
}
@media screen and (max-width: 320px) {
.indent {
margin: 0 2rem;
}
}
.front-left,
.front-right {
width: 100%;
float: none;
padding: 0;
}
.section-title {
margin-top: .5rem;
margin-bottom: 3rem;
font-weight: bold;
font-size: 30px;
font-size: 3rem;
line-height: 1.2em;
}
@media screen and (min-width: 750px) {
.front-left {
width: 50%;
float: left;
padding-right: 4rem;
}
.front-right {
width: 50%;
float: right;
padding-left: 4rem;
}
}
/* CONTENT AREA */
.content-area {
background: #fff;
background: hsl(0, 0%, 100%);
} `
Not sure why, but this problem has disappeared. Perhaps one of the updates fixed it?