Mobile columns

Can you please show me a URL to your page so I can look at it?

https://rosehipdesignstudio.com/shop/

Fine on Desktops but too cramped on phones.

Try changing the short code to: [downloads columns="0"]

Pippin the short codes are set to column=“0” now and the Shop page still looks bad because it still displays 3 columns poorly on small smartphone screens. There needs to be media query CSS to display 1 or 2 columns for narrow screens.

Pippin…. I would like to close this issue. If you have a demo shop page that displays on a 3 column layout on a small device like an iPhone screen, could you plz forward it to me?

Try this.

Set columns="0" and then add this CSS:

.edd_download_inner {
    float: left;
    width: 290px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 15px;
    position: relative;
    height: 300px;
    padding-top: 10px;
    background: #F7F7F7;
    border: 1px solid #ddd;
    text-align: center;
}

.edd_downloads_list.edd_download_columns_0 {
    width: inherit;
}

Still looks scrambled on iPhone portrait orientation, but OK if iPhone is held in landscape orientation.

It might be helpful to sent you some screenshots how this looks. Do you have an email address for this purpose?

After further testing the CSS, I have found that it is unlikely to get 3 columns of downloads/products to ever fit on small screen. The “$2.50 – Add to Cart” buttons are too wide to ever fit 3 across. They just pile up into an ugly mess on a narrow screen.

It would be nice if the column short command [downloads columns=“*”] wasn’t so rigid and effected all screen sizes. For my purposes, 3 column layout for desktops and 1 column layout for smartphones would be nice, but not possible with EDD?

I feel that the EDD plugin is not really responsive. Seems like a Bootstrap grid is needed to keep Shop page download items aligned properly for all device sizes.

It would be nice to have a setting (on/off) within the EDD plugin style settings panel saying the plugin is being used in a Bootstrap theme. I am seeing this style option in other WP plugin more often. Then the developer could easily tweak the EDD content (downloads) within the Bootstrap framework guidelines.

EDD does its best to try and fit on small screens but we cannot always get a perfect display.

The best option would be to write custom CSS that adjusts the responsiveness of the products to fit within your theme, or to use a theme that already supplies styling for EDD products and is fully responsive. We have numerous themes here that would be examples of that: https://easydigitaldownloads.com/themes/

I am fine rewriting my own CSS and using media queries. Can you please provide an example of how one over rides the short code columns parameter? How does one display 3 columns for wider screens/desktops and a single column layout for narrow smartphone widths? I am always stuck with the column layout number (0, 1, 2, 3) specified by the column short code parameter.

Also…. I am using the stock WordPress 2012 theme.

Hi there,

I’m the author of most of the EDD themes so I should be able to help out here. My first piece of advice would be to use Vendd as an example. Though the downloads display looks a lot different from most other themes, I actually built it using the [downloads] shortcode.

The first thing to note here is that using the columns parameter in the shortcode does nothing but add classes to the HTML markup. So regardless of what the shortcode says, you are 100% in control of the column structure. That means your shortcode could be [downloads columns=”5″] and you could still write CSS to make that display as 2 columns.

What you have to do is inspect the markup to see these classes and then write selectors to override them. You can see the section where I did this in Vendd starting here: https://github.com/easydigitaldownloads/vendd/blob/master/style.css#L1435

The classes like edd_download_columns_1, edd_download_columns_2, etc. are wrappers based on the shortcode columns value. So you can target those directly.

The same has to be done for responsiveness. Of course, you’d have to build your breakpoints based on your own theme dimensions. Luckily, you don’t have any responsive styles to override because EDD’s grid layout is not intentionally responsive. You’d just need to make it responsive with your own CSS. You can see where I started to do that in Vendd here: https://github.com/easydigitaldownloads/vendd/blob/master/style.css#L3447

Basically, this can be pretty involved. There is no standard solution because it’s always going to be based on the structure of the theme around it. We have no way to predict what that would be. Let me know if that makes sense after inspecting the markup based on shortcode changes and also looking at Vendd’s CSS. Then we can go from there.

Thanx for the links to your code. Really the only thing that is important here is that a 100% width is used for smartphone devices (mine is set max-width: 320px). This keeps one download/product per row on narrow screens. I no longer have any EDD text or buttons piling up on each other in the narrow real estate. I added a tabloid media query as well but it is optional.
If you’re a WordPress user with the 2012 theme, you can go into the Customizer and see the previews (desktop, tabloid, phone). In desktop view, I see whatever the column shortcode specifies. In tabloid view, I see two download/products per row. In phone view, I see a single download/product per row.

Very readable on all devices!

/* ———- Tabloid screens */
@media (max-width: 768px) and (min-width: 321px) {

.edd_downloads_list[class*=”edd_download_columns_”] .edd_download {
float: none !important;
display: inline-block;
padding: 40px;
vertical-align: top;
}
}

/* ———- Smartphone screens */
@media ( max-width: 320px ) {

.edd_downloads_list[class*=”edd_download_columns_”] .edd_download {
float: none !important;
display: inline-block;
width: 100% !important;
vertical-align: top;
}
}

Great!! So it sounds like you’re all good to go now. Please feel free to open a new ticket if you run into anymore issues or have more questions. We’re happy to help.