Ideas on How to create a 2-column Section Template

Answered

1 Comments

  • Ifra Saqlain
    Community Moderator

    Hey Melody, 

    You can use this code just need to pay attention to the class-name on your template, if you have multiple section templates so you can easily add new class-name :

    .section-list, .article-list{  // You add here new class-name also in same class-name would be add in you html code 
    display: flex;
    flex-wrap: wrap;
    }

    .section-list-item, .article-list-item{ // You add here new class-name also in same class-name would be add in you html code 
    flex: 0 0 45%;
    }

     

    As you have this code on your section template:

     {{#if section.sections}}
    <ul class="section-list new-class-name"> // Add here new class
    {{#each section.sections}}
    <li class="section-list-item new-class-name"> //Add here new class
    <a href="{{url}}">
    <span>{{name}}</span>
    </a>
    </li>
    {{/each}}
    </ul>
    {{/if}}

    And

    {{#if section.articles}}
    <ul class="article-list new-class-name"> //Add here new class
    {{#each section.articles}}
    <li class="article-list-item new-class-name {{#if promoted}} article-promoted{{/if}}"> //Add here new class
    {{#if promoted}}
    //Now add CSS

    section-list new-class-name, .article-list.new-class-name{
     display: flex;
    flex-wrap: wrap;
    }


    .section-list-item.new-class-name, .article-list-item.new-class-name{
    flex: 0 0 45%;
    }

     

    If any query let me know.

    Team

     

    0

Please sign in to leave a comment.

Powered by Zendesk