Forums

This topic contains 8 replies, has 2 voices, and was last updated by  snippet248 1 week, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #280542

    snippet248
    Participant

    This is what I have so far(check the image below), and is all good except for the order, that should instead be: first 3 items to the left column from top to bottom, and last 3 items in the right column form top to bottom, that is by event date from recent to older.
    Image-link: https://drive.google.com/open?id=1gKanyP4RofhzXDa3__pXAxhpnlVxr4lP
    When using flex I get this instead
    https://drive.google.com/open?id=1ebRqau-4H3BiKuJToszAMd5ICKdsTMYj

     
    </div> </div>

    not sure why the html is not beign shown here in the forum
    anyway the structure is like this

    +class=”contenedor-col-loop-act-vlista”>

    ++class=”col-lg-6 col-md-6 col-sm-12 col-xs-12 borde-hover order-lista”>

    +++class=”flex-modo-lista”>

    ++++content goes here

    And the css do note I have tried many things hence the commented lines

    .contenedor-col-loop-act-vlista {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-count: 2;
    flex-basis:50%;
    /display: grid;/
    /*
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    column-count: 2;
    max-height: 200px;*/
    }
    .order-lista {

    }

    #280562

    Paulie_D
    Moderator

    A minimal code demo of the issue in Codepen.io is preferred to random links and a mere snippet of CSS.

    #280573

    snippet248
    Participant

    Okey here it is

    fiirst codepen i create so if there are any errors jus let me know and I will fix it.

    #280577

    Paulie_D
    Moderator

    Unfortunately, if you are using a flex-column where you need it to wrap, then it must have a defined (or calculable) height so that the column knows when to wrap.

    #280627

    snippet248
    Participant

    Okey thanks for the reply.. well the idea is that everything is not in a single line, that means in other words that
    List 1: is in the left column, first row
    List 2: in the left column, second row
    List 3: in the right column, first row
    List 4: in the right column, second row
    and then it goes for the 12 lists.

    Something I must be doing wrong since… added height among other tests…

    #280633

    Paulie_D
    Moderator

    Perhaps you could mock something up (or do you have a design image) as I’m not clear on what this should look like…

    #280640

    snippet248
    Participant

    Here it is
    https://drive.google.com/open?id=1bnT75dk-GrIOKot8DyafEAN_n5E6-kMc
    Do note the idea is that it is sorted by date

    #281118

    snippet248
    Participant

    Please let me know if I should post the image elsewhere.

    #281299

    snippet248
    Participant

    That’s it (the updated codepen)!!! Thank you so much Paulie_D :-) Have a great year!!!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star