WordPress Gallery Shortcode and custom CSS for 4x1 Gallery Alternatives using Avada by ThemeFusion

4x1-gallery-flexbox-gutters.css

/* CSS for adding gutters with no wrap. */
#flex-gallery .fusion-builder-row.fusion-row {
  display: flex !important;
  margin: -1% !important; /* Adjust gutters as needed. */
}
#flex-gallery .fusion-builder-row.fusion-row > * {
  margin: 1% !important; /* Adjust gutters as needed. */
}

4x1-gallery-README.md

Keeping 4 Images in One Row (4x1) in Avada by ThemeFusion

This code is for the shortcode and flex box solution demonstrated in the how-to YouTube video.

Shortcode

For the shortcode, use the shortcode in the shortcode file and the #gallery-1 img CSS example for removing the default border around the gallery images.

Flexbox

For flex, you'll need to declare a flex-gallery ID in your row container. Then, use the first flexbox CSS rule. This will always keep the four images in one row for any device.

Making the Flex Solution Responsive

If you want to have the images wrap in a 2x2 for small devices (as an example), use the second set of flex CSS rules. Adjust the media query to suit your needs.

Gutters (space between)

In the responsive example, I added margin attributes to create gutters around the images.

See more about flex wrap and adding gutters on MDN.

Enjoy!

---

4x1-gallery-shortcode.md

[gallery size="thumbnail" columns="4" link="file" ids="82,83,84,85"]

4x1-gallery.css

/* For the flexbox solution. */
#flex-gallery .fusion-builder-row.fusion-row {
  display: flex !important;
}

/* If using the gallery shortcode. */
#gallery-1 img {
    border: none !important;
}

/* If you want the flexbox to display 2x2 on small devices,
   uncomment and use this code below. The code below also
   adds gutters for smaller devices. The gutter code
   can also be used outside the media query if you just
   want to keep working with the 4x1 for all devices.
#flex-gallery .fusion-builder-row.fusion-row {
  display: flex !important;
  flex-wrap: wrap; 
}
@media screen and (max-width: 767.998px) {
  #flex-gallery .fusion-builder-row.fusion-row {
      margin: -1%; !important;
  }
  #flex-gallery .fusion-builder-row.fusion-row > * {
     flex: 0 0 50%; 
     margin: 1%; !important;
  }
}
*/

The tutorial for how to use this code is on YouTube.

Added code to support gutters with or without media query for smaller devices. I originally used 10px gutters to exaggerate the space. But, I eventually switched back to responsive % units.

Thx for posting this. Do you know how to get it to work with the events shotdcode? I tried playing around with this code but something is just not aligning right.

Thx for posting this. Do you know how to get it to work with the events shortcode? I tried playing around with this code but something is just not aligning right.

Hi @bskousen,

You're welcome. :-)

Sorry, I'm not sure if I know which events shortcode you are referring to. Can you share with me a link to the events plugin and maybe a link to the page you're having the issue with?

Thanks!

Edit: Ah, probably this events plugin. They changed their look! https://wordpress.org/plugins/the-events-calendar/

Yeah, I actually contract with them. Re-doing a site now and between their CSS and Avada CSS it seems to have something I am not considering. Here is the URL, I am use the events shortcode and have a 2 column row, mobile only with 0 margin/ 0 padding http://staging.anz.isagenixevents.com/

Hi @bskousen,

Very cool. I hope you are enjoying the project.

Thanks for sharing the link. I see the last set of images in the Follow us panel are all in their own row and floated to the left under one parent Fusion row that contains the heading and the floated individual "mobile rows" for the images.

Since these individual "mobile rows" are floated left to under that parent row, they are left-justified under that row. So, they are slightly off as you noticed.

What's the fix? One way is to make that parent row a flexbox. Here's an example.

/** 
 * Flex Solution 
 * 
 * Try making the parent row of the mobile "rows" a flexbox.
 * You'll need to assign that row an ID or class to be able to 
 * get a handle on it first.
 *
 * <div id="mlc-test" class="fusion-builder-row fusion-row ">
 */

#mlc-test {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}

See the screengrabs for more details.

Let me know if this works for you.

Screengrabs

Floated left

Center justified using flex