Advertisements

How to display WP Show Posts in two columns on tablets

I was recently experiencing an issue on one of my site with how WP Show Posts displayed posts on tablet devices (which are mainly iPads). Per default, WP Show Posts will treat tablet devices as desktop-class devices.

That can lead to content and images being squashed next to one another and making the page look hideous. Take the example below as an example. I want the visitor to see more of the image and the text to have a bit more room.

WP Show Posts being displayed on a desktop browser

While I didn’t want the content to be displayed in a single column, as that would make the page endlessly long, I thought that perhaps having two columns would be the solution. So, I set out to find a solution.

How to define the number of columns in WP Show Posts

As it turns out, the solution was effortless. All it took was a few lines of CSS code and my site was ready for visitors using iPads and tablets. The first thing you’ll need to find is your list’s ID. To accomplish that, you can open up the WP Show Posts list and look at the shortcode. The ID, which is a number, is part of it.

Once you know your ID you can open up the WordPress Customizer and add some custom CSS. The custom CSS I’m using in this example will make the text just slightly smaller and will display the WP Show Posts list in two columns on tablets only:

@media (min-width: 768px) and (max-width: 1024px) {
  #wpsp-ID {
    font-size: 1em;
  }
  #wpsp-961 article {
    width: 50%;
  }
}

All you have to do is replace ID with the ID of your list. By adjusting the width you can change the number of columns display. For example, 100% would only display a single column. The first line makes sure that this CSS rule is only activated on devices with tablet-sized screens.

A WP Show Posts list with two columns
Setting the width to 100% displays two columns
A WP Show Posts list with one column
Setting the width to 100% displays one column

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

Leave a comment

Advertisements