Making the blog post entries images float right

  • Resolved Justin Tuijl

    (@static1635)


    9 months, 4 weeks ago

    Hi. I wasn’t happy with the “thumbnail” blog style on the blog entry posts pages as I wanted more control of the meta elements. Rather than re-code the thumbnail blog style I switched to full size image. With CSS I have made the image a thumbnail size and I have meta elements showing. However I’d really like the image to float right next the the title/meta/content. I’m finding that tricky to implement. I feel sure some CSS will do it rather than re-coding the php?

    • This topic was modified 9 months, 4 weeks ago by Justin Tuijl.

    The page I need help with: [log in to see the link]

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

  • Hello @static1635,

    Thank you for reaching out,
    As it has been customized, some CSS is required to arrange it; for example, this CSS influences the thumbnail: https://imgur.com/a/JRmlSqP.
    However, you can modify it slightly using the following CSS:

    @media(min-width:480px) {
    .blog-entry.post .blog-entry-summary {
        float: left;
        width: 50%;
        display: inline-block;
    }
    
    .blog-entry.post .thumbnail {
        float: right;
        width: 50%;
        display: inline-block;
    }
}

.blog-entry.post .thumbnail img {
    width: 100%;
}

    Result: https://imgur.com/a/SfAAUYY.

    For more styling, you can either learn CSS yourself or ask a professional to do it for you. CSS Tutorial: https://www.w3schools.com/css/

    I hope it helps.
    Best Regards

    Thread Starter Justin Tuijl

    (@static1635)

    Brilliant, that is perfect. Thanks for the code.
    I’m not sure why the thumbnail blog style doesn’t allow different meta elements?
    Still, that’s me done with the customisation of my site, happy with that.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Making the blog post entries images float right’ is closed to new replies.