Support » Theme: Simone » Simone-Lander theme blog content moves to left on wide screen

  • Resolved Ripple Web Design

    (@ripple-web-design)


    I love the one-page child theme of Simone – Lander. The only issue I am struggling with is the blog post resizing. On larger screens the post content moves to the left which would not be a problem if it didn’t overlap with the post author and date information. Here is the page:
    http://loveyourworkout.ca/2015/07/24/p-r-o-c-r-a-s-t-i-n-a-t-i-o-n/

    It doesn’t occur on the blog page, but after clicking “Read More” and then going to the post page, the content shifts and covers the author and post date information.

    Suggestions?

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Simone-Lander theme blog content moves to left on wide screen’ is closed to new replies.