Post Titles are indented (Canard)

  • Hi everyone,
    I’m pretty new to all of this, so forgive me if this question doesn’t make sense. Hopefully, it does.

    On my home page, underneath the five Featured post images, are the non-featured posts. I have an image accompanying each of these posts, which is on the left and a short excerpt of the text on the right. Above the text are the title and category. For some reason, the title and category are centered while the rest of the text underneath is aligned to the left. How can I get the title and category to align left so it’s in line with the text below it?

    This doesn’t seem to be an issue with the two mobile views of the site since everything gets scaled down and moved around a bit. Only the full desktop view is wonky.

    I’ve looked all over the forum and I couldn’t find anything that addresses this particular issue, but it’s been an issue for me from day one. My site isn’t live yet, but is there some way I can share with you what I’m seeing? Please let me know if there’s anything I can do to help make it easier to get assistance.

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)

  • Based upon the demo of the theme, you could try the following in Appearance->Customize->Additional CSS

    .home .post .entry-header {
    text-align: left;
}

    If that doesn’t work, you can take a screenshot and upload it to https://snipboard.io and then share the link to the image here.

    Thread Starter Andres

    (@amgarza)

    Thank you, Jarret.

    I tried the code, but it didn’t work.

    You can see a screenshot here:

    https://snipboard.io/JHiTaR.jpg

    Do you have any other CSS in place that could be interfering? Canard isn’t indented / centered in that area by default.

    Thread Starter Andres

    (@amgarza)

    Here’s all the code I have so far:

    .site-info{
    display:none;
    }
    /* Remove sidebar on Canard theme */
    #main {
    width: 100%;
    border: none;
    }
    #secondary {
    display: none;
    }
    .page .content-wrapper {
    padding-left: 60px;
    }

    @media screen and (min-width: 960px) {
    .comments-area {
    margin-right: 0;
    }
    }

    @media screen and (min-width: 1380px) {
    .entry-footer {
    width: 100%;
    float: right;
    }
    .entry-content {
    width: 100% !important;
    }
    }

    • This reply was modified 4 years, 9 months ago by Andres.

    OK. Can you remove / replace / get more specific with this one? It seems to be the issue:

    #main {
width: 100%;
border: none;
}

    Actually, I see now what the issue is: main is 100%, but the .entry-header isn’t.

    Try this:

    #main .entry-header {
	width: 900px;
}
    Thread Starter Andres

    (@amgarza)

    Thanks, Supernovia! That worked. I left the first code as is, but added yours right after, so it went like this:

      #main {
      width: 100%;
      border: none;
      }
      #main .entry-header {
      width: 900px;
      }

    It worked perfectly. Thanks for helping me out. Quick question, how’d you know to use 900px for the width?

    • This reply was modified 4 years, 9 months ago by Andres.
    • This reply was modified 4 years, 9 months ago by Andres.
    • This reply was modified 4 years, 9 months ago by Andres.
    • This reply was modified 4 years, 9 months ago by Andres.

    I’m glad that worked for you! I could have dug around in the CSS or done the math on the container width minus the column width and paddings, but instead I used Chrome’s Inspect Element and took a guess. My one superpower happens to be estimating, so I was able to get it pretty quickly ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Post Titles are indented (Canard)’ is closed to new replies.