2 columns in blog posts

  • Unknown's avatar
    jessicairelandlove · Member ·

    Hi there,

    I was wondering how to get my blog to display in two columns- so instead of one line I would like two pictures/articles next to eachother..

    https://jessicaireland.love/blog/

    thank you :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    majuphal · Member ·

    either your theme should provide you the option, or else you need to know css customization.

  • Unknown's avatar
    jessicairelandlove · Member ·

    Yes that is why I am posting- to find if someone can help me with CSS codes :)

  • dcoleonline · Staff ·

    Hi jessicairelandlove,

    We do have themes that use two columns by default, but if you’d rather not use one of those, you can try this CSS for your current theme:

    .blog .post {
    max-width: 45%;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}
.blog .post:nth-of-type(even) {
    margin-right: 0;
}

    Since your featured images are different heights, you may also want to add this code to set a maximum height for them to display:

    .blog .wp-post-image {
    max-height: 300px;
}
  • Unknown's avatar
    jessicairelandlove · Member ·

    hi dcoleonline

    thank you soooo much!!!! Love it!!

    I also have a second problem which I haven’t received a response to yet and if you know the answer I would very much appreciate your help-

    https://premium-themes.forums.wordpress.com/topic/mobile-view-on-front-page?replies=1#post-112034

    Thanks again, Jessica

  • dcoleonline · Staff ·

    Happy to help. I’ve just replied to the other thread.

  • Unknown's avatar
    jessicairelandlove · Member ·

    Thanks!

    I have another question regarding this blog page please:

    In mobile view it comes up weird, some posts are next to each other and some aren’t. Also, is there a way that I can use an ‘excerpt’ as the piece that is viewed on this page before your click to continue reading instead of the start of the article?

    thanks :)

  • dcoleonline · Staff ·

    In mobile view it comes up weird, some posts are next to each other and some aren’t.

    Hmm, I see what you mean.

    You could reduce the 45% max-width to something smaller until they fit side by side, but I’d actually suggest that they go back to being in one column on mobile (at least for portrait orientation).

    If you’d like to do that, you can replace the code from earlier in this thread with this:

    @media screen and (min-width: 415px) {
    .blog .post {
        max-width: 45%;
        margin-right: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .blog .post:nth-of-type(even) {
        margin-right: 0;
    }
    .blog .wp-post-image {
        max-height: 300px;
    }
}

    Also, is there a way that I can use an ‘excerpt’ as the piece that is viewed on this page before your click to continue reading instead of the start of the article?

    No, that isn’t possible with this theme, as it doesn’t make use of the excerpt feature on the blog.

  • The topic ‘2 columns in blog posts’ is closed to new replies.