Support » Theme: Goran » Posts images don't align to text

  • jocrone

    (@jocrone)


    The featured images on my posts are not aligning with the text and the format. As a work around, I added padding of 72px in the css.

    /* Post Thumbnail */
    .post-thumbnail {
    padding: 72px;
    position: relative;
    display: inline-block;
    margin: 0 auto 24px;
    }

    Problem then is that the image has too much white space around it when in the mobile format.

    How can I fix the alignment issue without adding this padding?

    The website url is: http://www.freshclef.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Could you please provide a link to a couple of example posts where things aren’t “aligning with the text and the format” and explain a little bit more what you mean? I had a look at your blog page here and removed your custom CSS for the post-thumbnail class and everything looked just as the theme was designed.

    The News

    You can take a look at the dblog on the Goran demo to see how the featured images are supposed to look, butted up against the left side of the main column:

    https://gorandemo.wordpress.com/blog/

    jocrone

    (@jocrone)

    Hi Kathryn,

    Didn’t realize the featured post was supposed to skew left. However, when I comment out that code, all of the images on http://freshclef.com/the-news/ also skew left.

    Because of the various image configurations, this makes our page look messy. I’m not great with the css (tried a bunch of things with the margins). Could you share a code snippet so that I can make these posts left justify with the text?

    (By the way, love your theme. As you can see I changed the colours to suit this identity — and to differentiate it).

    Thanks for your help!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Glad you’re liking Goran!

    Try adding this to your custom CSS to override the default margin on featured images:

    .archive:not(.no-sidebar) a.post-thumbnail,
    .blog:not(.no-sidebar) a.post-thumbnail,
    .search:not(.no-sidebar) a.post-thumbnail,
    .single:not(.no-sidebar) a.post-thumbnail  {
         margin-left: 0;
    }

    Let me know if that does the trick.

    jocrone

    (@jocrone)

    Hi Kathryn,

    Just got to it and it definitely moved it over. Thanks!

    Only problem now is that some of the images then overhang onto the right sidebar.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Only problem now is that some of the images then overhang onto the right sidebar.

    You can try modifying the width of the featured image with something like this:

    .archive:not(.no-sidebar) .post-thumbnail,
    .blog:not(.no-sidebar) .post-thumbnail,
    .search:not(.no-sidebar) .post-thumbnail,
    .single:not(.no-sidebar) .post-thumbnail  {
         width: 700px;
    }

    You may also want to wrap that in a media query so it only affects larger screens, and make similar modifications for other screen widths so the image doesn’t overflow the column at smaller sizes. I’d suggest you check the theme’s style.css file to see which screen widths are already targetted and match those.

    You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Hi,

    I’ve read all this and i have the exact same problem, im new to wordpress dev and not really good with css.

    I’ve copy and paste this “.archive:not(.no-sidebar) a.post-thumbnail,
    .blog:not(.no-sidebar) a.post-thumbnail,
    .search:not(.no-sidebar) a.post-thumbnail,
    .single:not(.no-sidebar) a.post-thumbnail {
    margin-left: 0;
    }”

    and that fix the problem i had when there’s a list with all my news, but when im on the news’ page, my image is still on the left stuck to the sidebar.

    any help ?

    Sorry for my bad english.

    Here, the image is correct : http://www.blog-esport.com/blog/

    There, it’s not good : http://www.blog-esport.com/2015/11/25/coach-vers-un-6eme-joueur-sur-league-of-legends/

    @pyrohh: If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s. This thread is 8 months old and may no longer be relevant.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    PyroHH – you’ll get a reply here:

    How to align image with related post

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Posts images don't align to text’ is closed to new replies.