Title: responsive column numbers?
Last modified: March 12, 2021

---

# responsive column numbers?

 *  Resolved [iconphotoco](https://wordpress.org/support/users/iconphotoco/)
 * (@iconphotoco)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-column-numbers/)
 * I want the number of columns in my gallery to change as the screen size changes.
   Specifically:
 * page containers above 1120px: 3 columns
    less than 1120: 2 columns less than 
   768: 1 column
 * I’m new with foogallery so for now I did a workaround by making 3 different galleries(
   1, 2 and 3 columns) and setting them to display or hide at certain screen widths.
   But I’m afraid this plan is slowing my page down.
 * Is there a way to do this with one gallery that displays different numbers of
   columns based on screen width?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-column-numbers%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-column-numbers/#post-14176709)
 * Hi [@iconphotoco](https://wordpress.org/support/users/iconphotoco/)
 * I would not recommend you have 3 galleries on the page as that will slow your
   page load times down.
 * The only way to get what you want is with some custom CSS. To make the gallery
   use 2 columns, you can use this CSS snippet:
 *     ```
       @media only screen and (max-width: 1120px){
       	.foogallery.fg-default .fg-item {
       		margin: 10px !important; /* Change the gutter size */
       		/* Change the width so two columns are displayed.
       		The 20px value is the gutter multiplied by 2
       		as it is displayed on the left and right of the item. */
       		width: calc(50% - 20px) !important;
       		min-width: calc(50% - 20px) !important;
       		max-width: calc(50% - 20px) !important;
       	}
       }
       ```
   
 * But you would need to tweak that CSS to also include some CSS for the 768 breakpoint
 *  Thread Starter [iconphotoco](https://wordpress.org/support/users/iconphotoco/)
 * (@iconphotoco)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-column-numbers/#post-14177408)
 * Thank you!
    I’m already using one CSS snippet to make the gallery not span the
   full screen width:
 * .foogallery#foogallery-gallery-1480{
    max-width: 1120px; }
 * Do I just copy the snippet you shared below it? Or does it need to be inside 
   the bracket at the end?
    And (I realize this may be too much to ask but hell,
   I’m doing it anyway)–I don’t have coding experience so modifying the CSS so it
   has columns reduce to 1 at the 768 break point is out of my league. Could you
   please paste that snippet too? 🙂
 *  Thread Starter [iconphotoco](https://wordpress.org/support/users/iconphotoco/)
 * (@iconphotoco)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/responsive-column-numbers/#post-14185326)
 * EDIT:
 * This is the custom code I’m using so far, which *is* working to constrain gallery
   width to 1120 pixels, but *isn’t* working to display different numbers of columns
   at different screen widths.
 * [@bradvin](https://wordpress.org/support/users/bradvin/) can you please help 
   me modify & add to this code to accomplish 3 things:
    1. constrain gallery width
   to 1120 pixels 2. reduce to 2 columns on screens below 1120px 3. reduce to a 
   single column on screens below 768px
 * .foogallery#foogallery-gallery-1480{
    max-width: 1120px; }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   1120px){
    .foogallery.fg-default .fg-item { margin: 10px !important; /* Change
   the gutter size */ /* Change the width so two columns are displayed. The 20px
   value is the gutter multiplied by 2 as it is displayed on the left and right 
   of the item. */ width: calc(50% – 20px) !important; min-width: calc(50% – 20px)!
   important; max-width: calc(50% – 20px) !important; } }`
    -  This reply was modified 5 years, 2 months ago by [iconphotoco](https://wordpress.org/support/users/iconphotoco/).
 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/responsive-column-numbers/#post-14186385)
 * You can try this, but I have not tested it. If it does not work, then please 
   play around with the values to get it working. Failing that, please ask your 
   web developer to assist
 *     ```
       .foogallery#foogallery-gallery-1480{
         max-width: 1120px;
       }
   
       @media only screen and (max-width: 1120px) {
         .foogallery.fg-default .fg-item {
           margin: 10px !important; /* Change the gutter size */
           /* Change the width so two columns are displayed.
           The 20px value is the gutter multiplied by 2
           as it is displayed on the left and right of the item. */
           width: calc(50% – 20px) !important;
           min-width: calc(50% – 20px) !important;
           max-width: calc(50% – 20px) !important;
         }
       }
   
       @media only screen and (max-width: 768px) {
         .foogallery.fg-default .fg-item {
           margin: 0 !important;
           width: 100% !important;
           min-width: 100% !important;
           max-width: 100% !important;
         }
       }
       ```
   

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

The topic ‘responsive column numbers?’ is closed to new replies.

 * ![](https://ps.w.org/foogallery/assets/icon-256x256.gif?rev=2602542)
 * [Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel](https://wordpress.org/plugins/foogallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/foogallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/foogallery/)
 * [Active Topics](https://wordpress.org/support/plugin/foogallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/foogallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/foogallery/reviews/)

## Tags

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

 * 4 replies
 * 2 participants
 * Last reply from: [bradvin](https://wordpress.org/support/users/bradvin/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/responsive-column-numbers/#post-14186385)
 * Status: resolved