4 Comments

  • Ifra Saqlain
    Community Moderator

    Hey, you can use this code just need to copy and paste it, I tried it on Copenhagen Theme so you need to pay attention to the class name if your template has any different classes.

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    }
    @media (min-width:768px){
    .section-content .article-list-item{
    width: 50%;
    padding: 0 20px 0 0;
    }
    [dir="rtl"] .section-content .article-list-item{
    padding: 0 0 0 20px;
    }
    }

     

    Team

    0
  • joeybeans

    Hi! Omg, thank you so much, that's helped! You're amazing!

    I'm so sorry, do you think you can help with 1 more thing? It's split it into the 2 columns, but I want them possibly stacked the other way:

    e.g. it used to be:

    A
    B
    C
    D

    And now it's:

    C | A
    D | B

    I'm hoping to get it to be:

    A | C
    B | D

    Thanks :)

    EDIT: I think I got it going by adding "flex-direction: row-reverse;" here:

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;

    Thank you so much again though!!

    0
  • Ifra Saqlain
    Community Moderator

    Okay, you want to reverse the columns.

    Remove previous code and copy-paste this code:

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse; //only added this property
    }
    @media (min-width:768px){
    .section-content .article-list-item{
    width: 50%;
    padding: 0 20px 0 0;
    }
    [dir="rtl"] .section-content .article-list-item{
    padding: 0 0 0 20px;
    }
    }
    0
  • Ifra Saqlain
    Community Moderator

    Awesome! 

    0

Please sign in to leave a comment.

Powered by Zendesk