- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
I am not sure exactly how to solve your scenario. but refer this link might be helpful for you.
https://gridbyexample.com/examples/
Thanks.
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/
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.
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