Back to Blog
Divi responsive columns5/6/2023 ![]() ![]() At 980 pixels, Divi splits the content between two s. So, we need to modify our approach to make sure that our blog grid continues to function. In effect, Divi is ignoring our very carefully constructed layout and using its own. Now, the reason we have not styled below 980 pixels so far (thank you Rickard for pointing this out) is that, below this point, Divi makes some significant changes to the layout. So, above 1200 pixels the blog grid will display as four columns and from 1200 to 981 pixels the blog grid will display as two columns. In fact, this is presumably why Divi chose to implement the original blog grid as three columns, placing blogs alternately in each of them. Though the approach used here sacrifices the masonry style behaviour that you get with the original three column grid, we think this is worth it, given the problem it solves. If we used float:left, and if the blogs were of different heights, and the blog in the first column of the row above extends further down than the blog in the second column of the row above, the first blog in the next row would be placed under the second column and not the first column, leaving a big gap in the grid. This can easily happen, because the extract is of variable length (as are the blog titles themselves). Now, we could have used float:left instead, but doing so would potentially give problems with alignment when blogs are of different heights. ![]() The crucial part of the CSS though is the display:inline-block vertical-align:top What this does is to align the top of the blogs. The intention of this is to allow for four blogs per row. The first thing to notice is that we set the width and margins. ![]() The next piece of CSS is targeted at the individual blogs themselves, these are the objects with class et_pb_post. It probably won’t work with any other splt. Though the example above used a 1/4 to 3/4 split for the row, we have added appropriate classes to the CSS so that it should also work for a 1/2 to 1/2 split and a 1/3 to 2/3 split. So what does this CSS do? Well, the first thing it does is to expand the column that holds the blog module to be full width. ![]()
0 Comments
Read More
Leave a Reply. |