Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to use CSS for Envira for a 1 column layout Mobile

Would you like to make Envira galleries use a 1 column layout on mobile devices? This tutorial will walk you through creating this layout using CSS.

  1. Create your gallery
  2. The CSS
  3. Adding the CSS
  4. FAQs

The first step is to create your gallery. Keeping in mind that the CSS we’ll be adding only affects galleries that are set to a column from the Number of Gallery Columns dropdown list on the Config Tab.

Set your Number of Gallery Columns for Envira to something other than Automatic to get the CSS to work

The CSS you’ll use is as follows:

@media only screen and (max-width: 600px) {  

.envira-gallery-wrap .envira-gallery-public.envira-gallery-2-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-4-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-5-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-6-columns .envira-gallery-item {    
width: 100% !important; 
} 

}

The CSS above will target any Envira gallery that is a column (and not an Automatic gallery) when the screen size is 600px or less. The above CSS will set all columns to be 100% of the content area of the page.

Add your CSS to the Appearance » Customize » Additional CSS in the space provided and then click Publish to save the changes.

Add your CSS to the WP Customizer to change all column galleries on mobile

If you’d like to have some more fun with Envira and CSS, check out our tutorial on How to Style the Tags Filter.


Q: How can I target albums?

The CSS to target the same 1 column on mobile for Envira Albums would be this:

@media only screen and (max-width: 600px) { 

.envira-gallery-wrap .envira-album-public.envira-gallery-2-columns .envira-gallery-item, .envira-gallery-wrap .envira-album-public.envira-gallery-3-columns .envira-gallery-item, .envira-gallery-wrap .envira-album-public.envira-gallery-4-columns .envira-gallery-item, .envira-gallery-wrap .envira-album-public.envira-gallery-5-columns .envira-gallery-item, .envira-gallery-wrap .envira-album-public.envira-gallery-6-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-2-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-4-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-5-columns .envira-gallery-item, .envira-gallery-wrap .envira-gallery-public.envira-gallery-6-columns .envira-gallery-item {
width: 100% !important;
}

}

This CSS can also be added into the same place as mentioned in step 3.

Q: Why am I not seeing my columns at 100% on mobile?

Please edit the gallery and on the Config Tab, make sure the Number of Gallery Columns isn’t set to Automatic.