Is the downloads shortcode responsive?

In Easy Digital Downloads (EDD), the [downloads] shortcode is the standard way for outputting all of your products on a single page. If you are not familiar with the shortcode and its capabilities, you can read about it here.

By default, your products will display in a grid layout with three columns, nine products, and pagination if you have more than nine products in your store. In most themes, this display serves its purpose just fine without any additional CSS (design styles) from the theme itself. However, it may not look exactly the way you want it to in all themes. Even worse, the display may become distorted on smaller screens.

This typically leads to the question, “is the [downloads] shortcode responsive?” In other words, people often wonder why the display doesn’t look so great on small screens. I’ll explain why, and what you can do about that below.

Why isn’t the [downloads] shortcode responsive?

The first thing to note is that responsiveness is not a one-size-fits-all type of behavior. The responsiveness of an element depends entirely on the environment in which it is contained.

For example, let’s say there’s a section of your site with two side-by-side columns filled with text, both spanning 50% of the width of your main content area. Let’s also say that the main content area “holding” those twin columns is 1000px wide. That means each column is 500px wide. As the screen width becomes more narrow on smaller devices, somewhere around a 600px content area width starts to make the now-300px columns a little too slim. That’s undesirable, so responsive CSS uses rules to say, “at 600px screen width, change the width of these two columns from 50% to 100%, and stack the left one on top of the right one.” And with that, they both become legible once again.

That’s exactly how responsive CSS works, and it is done with intent.

With that understanding, it becomes clear that in order to write the responsive CSS to make those twin columns “respond” to the screen width, we must also know the dimensions of the elements around the columns. In the WordPress context, that means we need to know the design and dimensions of your theme.

Of course, we cannot know the details of all the themes our customers may use. While your theme may output the [downloads] shortcode in an element that is only 500px wide, the next person’s theme may output the same shortcode in an element that is 900px wide. Your responsive CSS would need to be a lot different than the other person’s responsive CSS. And if you switch themes, your responsive CSS would need to change once again.

To put it another way, we simply cannot predict when and how the [downloads] shortcode should respond to every theme all at once.

Are there themes that include responsive CSS for the [downloads] shortcode?

Yes indeed! In most themes that are built to take advantage of EDD, this is already done for you. For example, the Vendd theme fully designs the [downloads] shortcode output for all screen sizes. You can see it on the demo here: https://easydigitaldownloads.com/vendd/ Not only does Vendd make the [downloads] shortcode responsive, but it also enhances the layout.

If a theme was not enhanced with EDD in mind, the output of the shortcode will not be responsive. It will display as specified by the shortcode parameters and nothing more. If you need it to “respond” to screen size, that must be written from the perspective of your theme specifically.

Also, note that some themes that are enhanced for EDD still may not make the [downloads] shortcode responsive. Instead, it will include its own template for displaying products and suggests that you use the custom template instead of the shortcode.

There is a large selection of EDD-ready themes available here: https://easydigitaldownloads.com/themes/

What should I do if I am not using an EDD-ready theme?

If you would like to continue using your theme that is not enhanced for EDD, but you would also like your [downloads] shortcode output to be responsive, you have two options:

1. If you are a CSS author, you can simply write responsive CSS to make the shortcode output do as you please from your theme. You will not need to worry about EDD making any changes that will break your CSS.

2. Hire a designer to make the output responsive for you. It’s not an incredibly difficult task so the designer would not need to be familiar with EDD itself. Responsive CSS is a widely understood design style and just about any CSS author should be able to view the output and make it responsive for your theme. If you would like to stick to a professional that is already familiar with the EDD ecosystem, we recommend our trusted partner, Codeable.