Skip to main content

Forums

This topic contains 4 replies, has 3 voices, and was last updated by  Christian Thorne 5 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #282460

    Christian Thorne
    Participant

    Hello,

    I would like to style a post feed module (Divi theme) so that the first column is 50% width and the rest of the 7 are 25%, creating a grid like this https://www.screencast.com/t/GNJODhIG3

    I have this CSS grid code so far, but I can’t find a way of editing it to get the desired layout.

    .ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-column-gap: 2.5%;}
    

    Is there some code I could add like “column-one, row-one: 50%;”

    Any help would be much apreciated,,, thanks.

    #282548

    yoyo
    Participant

    I am not sure exactly how to solve your scenario. but refer this link might be helpful for you.

    https://gridbyexample.com/examples/

    Thanks.

    #282550

    Christian Thorne
    Participant

    Thanks yoyo,, I’ll check it out.

    If it helps the page (post feed) I’m trying to work on is http://mediaworldwide.co.uk/perfect-storm/ams-test-site/news/

    #282688

    Paulie_D
    Moderator

    What you have there is a FOUR column grid, not a FIVE column one.

    Then just tell the first item to be TWO columns wide.

    #282691

    Christian Thorne
    Participant

    Thanks @paulie_d, this would normally work, but becuase I am trying to style a post feed module, I only have one class to work with (I can only assign one class), and the elements are childs of that class. For example this code makes the first column 50%, but it repeats on the next row.

    .bloggrid-no-excerpts-news-test .column.size-1of3:nth-child(1) { width: 47.667% !important; }

    I have tried lots of different nth-child formulas but I can’t break out of the child parent relationship… Do you think a combination of both might work?

    Thanks

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

You must be logged in to reply to this topic.

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