The Extra theme’s posts module provides a way to display posts with a main post (e.g. the most recent) displayed prominently, and other posts more compactly displayed beside. This looks good at desktop widths, but on mobile devices it can look rather cramped. Here’s how to make the posts module stack the posts in a more spacious vertical layout on mobiles.

First, here’s how the posts module normally looks on mobile:

As you can see, both the main post on the left and the smaller posts on the right are rather cramped. 

We can easily make the posts module responsive by adding the following CSS to the site:

@media only screen and (max-width: 980px) {
	.et_pb_extra_module.post-module .main-post {
		width: 100% !important;
		border-bottom: 1px solid rgba(0,0,0,.1) !important;
	}
	.et_pb_extra_module.post-module .posts-list {
		width: 100% !important;
	}
}

To add the CSS code to Extra, paste it into Extra's custom CSS box, which you can find from your WordPress admin menu at "Extra > Theme Options > General > Custom CSS". Paste it after any other code already in there. Alternatively, you can place it in the style.css file of your child theme (if using).

Here’s the resulting mobile responsive version of the Extra theme’s posts module: