Envira Gallery in footer doesn't display correctly

Hello! We’ve created an Envira gallery to display all of our sponsor logos. We’d like them to appear in the footer, however it displays super tiny for some reason.

HOWEVER, if we put the same gallery shortcode on the page, it shows up right AND it makes the footer gallery show up right too.

Any way to remove the shortcode from the page and ONLY have it display correctly in the footer?

It also appears the links I entered for each image aren’t working on either the page or footer. The images aren’t clickable although we’ve saved the hyperlink and checked off to open the link in a new window.

Any ideas?

Here’s the page with gallery showing up right in the body and in the footer.
http://runningclub.richard-creative.com/wordpress/

Hello @richardcreative,

Thanks for writing in!

Regretfully the given URL is not working for us. Meanwhile, your issue sounds like you may have inserted a broken code somewhere in the footer which has affected the display of the other items. Where did you added the gallery in the footer? Is it in the footer content or in the footer widget section. It is best if you can give us the correct URL and your WP access if you wouldn’t mind so that we can resolve this issue for you.

Regards.

My apologies! The site got moved around on the server.

The new domain name is https://runningclub.richard-creative.com

You can see the gallery displaying teeny-tiny on this page where there isn’t a gallery up earlier on the page: https://runningclub.richard-creative.com/2019-2020-running-club/

Will add login credentials as well.

Hello @richardcreative,

Thanks for writing in!

If you use Content Area element, you do not have any controls over the element. The minimum width is set to zero. I would recommend that you use text element instead. I went ahead and added it. The Envira gallery is now bigger. If you want to control the width, just adjust the maximum width of the container. And by the way, I removed the maximum height because it is causing problems with the other containers.

Check your footer now.

Thanks! When I checked back on the footer, it looks the right size UNTIL we removed the same gallery from the page above. When that is gone and the page saved, then the footer goes back to being teeny-tiny (even when it’s using a text box instead of a content area).

Also, any idea why the links on the gallery images aren’t working?

Check out any of the pages now and the footer appears too small and still not clickable.

FYI it looks like Safari removes the footer altogether.

Chrome is what is displaying the gallery too small and without links.

Hi @richardcreative,

Ok, so the issue here is the Envira Gallery cannot get width from its parent div whether it’s a text element or content element.

Now, even if the text element is set to 100% width, there is nothing to base the 100% because the Container has no width as well, its flex-basis turns to be the height because the bar’s flex layout is set to column. I understand this is a bit confusing, but it will be clear when do you the solution below.

To resolve this, first set your bar’s flex layout to ROW and turn on the Wrap Children option.

Then set all those 3 container’s Flex basis to 100% this is so the containers will be stacked to each other and have an actual width.

Lastly, set the Text element’s (where the Envira gallery shortcode is) width to 100%, this is where your envira gallery width will be base now, so if you want it not too big, so can set it somewhere 600px-300px.

See the “test 2” footer that I created for your reference.

Using Flexbox

Regarding the links, please navigate to lightbox tab of your gallery and enable links

Hope it helps,
Cheers!

GOTCHA! That actually does make perfect sense when you explain it so fully. THANK YOU!!! It’s working perfectly now.

Cool, we are delighted to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.