responsive column numbers?

  • Resolved iconphotoco

    (@iconphotoco)


    5 years, 3 months ago

    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 to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author bradvin

    (@bradvin)

    5 years, 3 months ago

    Hi @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

    (@iconphotoco)

    5 years, 3 months ago

    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

    (@iconphotoco)

    5 years, 2 months ago

    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 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 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.
    Plugin Author bradvin

    (@bradvin)

    5 years, 2 months ago

    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.

Tags