Envira Gallery Bottom 3 Breakpoints

[designerwriter]

Hello. I am having an issue with Envira Gallery in Edit mode. Why are the cells so large where there are huge gaps in three of the breakpoint options (the bottom 3)?
Is it better if I just create this page with the grid element like I did the other writing pages? See the attached three breakpoints where this issue is appearing. Now in view mode, the images get smaller in these three breakpoints so the columns don’t collapse like they do on my home page.

This got me thinking is it better that I do my whole website with columns and the grid element? I will keep the Envira Gallery for the graphic design section and perhaps the photography section because I want the pagination. Another question is, how do I fix this?

g/designerwriter

[friech]

Hi Grace,

Thank you for writing in, those type of elements with an editor of their own is better to not output in the Builder to avoid conflicts. So instead of using the Envira Gallery shortcode inside the text element, use the Classic Envira Gallery element.

Hope it helps,
Cheers,

[designerwriter]

I see the Classic Envira Gallery element but do I set up columns and rows with it or just create a text box and drop it in the section? Right now I am just seeing this…see attached. I selected the Writing gallery in the dropdown menu but nothing is showing up.

[friech]

Hi Grace,

Yes, you just need to drop it on the column where you need it to be and select the gallery from the dropdown (like what you have on your screenshot).

Then the actual editing of the gallery will be on the Envira Gallery editor.

Cheers,

[designerwriter]

Not sure what you mean by this - “Yes, you just need to drop it on the column where you need it to be“…you mean copy the shortcode and drop it in the viewing area box? Or do I use the grid element and what do I use one column then drop in the shortcode? I don’t understand what the next step is.

Here’s what I did:

1. Created a section
2. Dragged the Classic Envira Gallery element into the section
3. Chose Writing from the dropdown menu

Then what? Where do I put the code?

[friech]

Hi Grace,

You don’t need the Envira Gallery shortcode.

The step is:

• Create a section/row/column
• Dragged the Classic Envira Gallery element into the section/row/column
• Chose your gallery from the dropdown menu
• That’s it

You don’t see a preview of the gallery on the builder, but you can see the gallery in the front end.

If you want to edit the Gallery, you need to navigate to the Envira Gallery editor. That means you can not edit the gallery itself inside the builder, Envira Gallery has its own editor.

Thanks,

[designerwriter]

Ok I see it and I checked all of the base points on the front end. Now the difference is that unlike using the grid element, the images don’t collapse and go into a singular row with the smaller break points but rather, the whole grid of images gets reduced as a group at each break point correct? This is the difference between using the Pro theme grid element.

It’s almost more practical to use the Pro Grid Element because it works better visually where the images collapse into single rows rather than have the whole group of images reduce so small. Thoughts on this?

If I decide to just use the Grid Element, is there a pagination plugin that comes with it or that you can recommend that works with Pro and the Grid Element?

How can I view the different break points in Edit mode? Nothing seems to be changing meaning I just get the same group of images so they do not collapse.

designerwriter

[friech]

Hi Grace,

Envira Gallery will automatically collapse on mobile view, unfortunately, you can not set this when to collapse manually.

Regretfully there is no pagination feature with the Grid element.

@designerwriter

How can I view the different breakpoints in Edit mode? Nothing seems to be changing meaning I just get the same group of images so they do not collapse.

You can’t since the Envira editor and Page Builder will not give you a preview of the Gallery, you need to look at it on the frontend, you can then simulate a mobile view on your browser by pressing F12, and then crtl+shift+m. Or just resize your browser window to emulate a mobile view.

Cheers,

[designerwriter]

I did resize my window and it did not collapse. I will try pressing F12 and crtl+shift+m tomorrow. Also, can you recommend a pagination plugin that works well with Pro using the Grid element option? Thank you.

[friech]

Hi Grace,

Sorry, there is no plugin that adds a pagination feature on a Grid Element.

You might want to consider another bundle plugin called Essential Grid.

Thanks,

[designerwriter]

I am not going to use Essential Grid because I have to pay for support every 6 months. I prefer to use Envira Gallery and Soliloquy because it’s a yearly payment and they have pagination. Should I use a generic plugin and if so, can you recommend one that works well with Pro?

I tried doing the F12 and crtl+shift+m but it didn’t work so I resized the window to it’s smallest size and I got the size attached. It just seems too wide for a cell phone. Thoughts?

[friech]

Hi Grace,

Sorry, we have no other recommended grid plugin besides the one that is already mentioned here in the forum (Envira, Essential Grid, native Grid element).

Please check this documentation regarding the browser’s responsive view.

I just check that grid on your site, that grid goes to 2 columns on standard mobile screen size

Then 1 column on very small screen size.

Cheers,

[designerwriter]

Ok great thank you friech! I am happy the way it looks but I have a question. Why is there a white gap between the border and the image on the left and right sides in the smaller views? Should I put the stroke outline around the image instead of the cell? Could this be the issue? Which is a better application around the image or cell? Obviously there is something wrong if there are gaps around the image because I applied the outline around the cell not the image.

g/designerwriter

[friech]

Hi Grace,

Are you referring to a different page? I don’t see a cell on that page. I’ve check Envira Gallery and unfortunately, there is no option to enable/disable that border.

It is possible with custom CSS, but we don’t provide support for any customization here is the forum. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.

Thanks,

[designerwriter]

Sorry I put the border around the images. I can live with it if it’s just showing on the smaller version.

g/designerwriter

[marc_a]

Hi Grace,

Based on your response, it seems that you already figure it out! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.