Two Columns for blog posts

  • Resolved Hamada Hussein

    (@hamadaboss)


    4 years, 11 months ago

    Hello,
    Good day everybody. I have a question: How can I achieve for blog posts to show in two columns, now they show one column. I know that this is a theme related and it requires some css code, can someone assist me with a css code. I use Travel agency theme and been playing around with css and was able to make Post show in two columns, but in the end I found out I was playing with the primary post styling itself so I will have to start with a new code. Please help!
    I was using:
    #primary .post {}
    Tried:
    #blog .post {} but did not do anything
    Tried:
    #archive .post {} but did not do anything
    Forgive my ignorance as I am a newbie.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support WP Travel Engine Support

    (@wptravelenginesupport)

    Hi @hamadaboss,

    Please add the given CSS in your Admin Dashboard > Appearance > Customize > Additional CSS and save the changes.

    .blog #primary .post{
    width: 50%;
    padding: 0 30px;
}
.blog #primary .site-main{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -30px;
}
#primary .post .entry-footer .meta-holder {
    margin-top: 16px;
}
@media screen and (max-width: 768px){
    .blog #primary .post{
        width: 100%;
        padding: 0 20px;
    }
}

    This shows two columns on the Blog Posts as – https://prnt.sc/s0xl76

    For further assistance, please post the theme-related queries in the respective theme’s forum.

    Thanks!

    Thread Starter Hamada Hussein

    (@hamadaboss)

    Thank you for your help.
    It did not do it. It seems that .blog #primary .post does not do anything!
    I have pasted the code into my additional css and it did not affect anything, and then deleted it and pasted it again in my child theme style.css and again it did not do anything!

    Thread Starter Hamada Hussein

    (@hamadaboss)

    Now the code is in my additional css

    Thread Starter Hamada Hussein

    (@hamadaboss)

    When I use the inspect tool, it seems that the blog style is controlled by #primary .post, that is the only one affecting the style, but it also affects the post itself.

    Thread Starter Hamada Hussein

    (@hamadaboss)

    (SOLVED) Here is the code that worked with me:
    #primary .post{
    width: 50%;
    padding: 0 30px;
    }
    #primary .site-main{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -30px;
    }
    #primary .post .entry-footer .meta-holder {
    margin-top: 16px;
    }
    @media screen and (max-width: 768px){
    .blog #primary .post{
    width: 100%;
    padding: 0 20px;
    }
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Two Columns for blog posts’ is closed to new replies.

Tags