Title: Mobile columns
Last modified: September 1, 2016

---

# Mobile columns

 *  Resolved [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/)
 * My Shop page looks fine with 3 columns of downloads, but with mobile testing 
   the 3 column layout is too cramped and looks like hell. Is there a way to invoke
   a media query that would change the 3 column layout to a 2 column layout on mobile
   devices? Can’t seem to modify anything on the Shop page for smaller devices.
 * [https://wordpress.org/plugins/easy-digital-downloads/](https://wordpress.org/plugins/easy-digital-downloads/)

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Moderator [Pippin Williamson](https://wordpress.org/support/users/mordauk/)
 * (@mordauk)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481209)
 * Can you please show me a URL to your page so I can look at it?
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481215)
 * [http://rosehipdesignstudio.com/shop/](http://rosehipdesignstudio.com/shop/)
 * Fine on Desktops but too cramped on phones.
 *  Moderator [Pippin Williamson](https://wordpress.org/support/users/mordauk/)
 * (@mordauk)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481297)
 * Try changing the short code to: `[downloads columns="0"]`
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481309)
 * 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.
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481360)
 * 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?
 *  Moderator [Pippin Williamson](https://wordpress.org/support/users/mordauk/)
 * (@mordauk)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481372)
 * 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;
       }
       ```
   
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481375)
 * Still looks scrambled on iPhone portrait orientation, but OK if iPhone is held
   in landscape orientation.
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481378)
 * It might be helpful to sent you some screenshots how this looks. Do you have 
   an email address for this purpose?
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481381)
 * 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.
 *  Moderator [Pippin Williamson](https://wordpress.org/support/users/mordauk/)
 * (@mordauk)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481393)
 * 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/](https://easydigitaldownloads.com/themes/)
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481394)
 * 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.
 *  [Sean Davis](https://wordpress.org/support/users/sdavis2702/)
 * (@sdavis2702)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481395)
 * 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](https://github.com/easydigitaldownloads/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](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](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.
 *  Thread Starter [gordo019](https://wordpress.org/support/users/gordo019/)
 * (@gordo019)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481402)
 * 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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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; } }
 *  [Sean Davis](https://wordpress.org/support/users/sdavis2702/)
 * (@sdavis2702)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481403)
 * 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.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Mobile columns’ is closed to new replies.

 * ![](https://ps.w.org/easy-digital-downloads/assets/icon.svg?rev=3455837)
 * [Easy Digital Downloads – eCommerce Payments and Subscriptions made easy](https://wordpress.org/plugins/easy-digital-downloads/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/easy-digital-downloads/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/easy-digital-downloads/)
 * [Active Topics](https://wordpress.org/support/plugin/easy-digital-downloads/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easy-digital-downloads/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easy-digital-downloads/reviews/)

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 14 replies
 * 3 participants
 * Last reply from: [Sean Davis](https://wordpress.org/support/users/sdavis2702/)
 * Last activity: [9 years, 10 months ago](https://wordpress.org/support/topic/mobile-columns-1/#post-7481403)
 * Status: resolved