Footer keeps shifting up

[rongreen]

I have a master page that contains a footer. However, I keep running into a problem where it keeps shifting up just inside of the bottom inside container of the galleries on each of the six (one per page). It is also seen when viewed in the browser. I have created a zip file that is based on just one of the galleries and the master page. I also created a screen shots of the issue occuring in WYSIWYG and in the browser window. They are located at the following URLS:

https://www.greensphotoimages.com/footer_shifting.zip
https://www.greensphotoimages.com/wyswyg.jpg
https://www.greensphotoimages.com/foote ... rowser.jpg

Thank you for any help offered.

[crispy68]

Getting 404 errors on your 2 image links

[rongreen]

Is it possible to attach the two jpeg screen shots to this post?

[rongreen]

Is it possible to attach the two jpeg screen shots to this post? Or would it be better to zip the two files?

[BaconFries]

No sorry unloading images to the forum is disabled for security reasons. You can use the following url and post the urls here: https://imgbb.com/

[crispy68]

In looking at your page, the reason it is happening is because when the photo gallery is placed inside the flex container it has a fixed height of 804px. When previewed your text titles are wrapping to another line which causes the height to increase beyond this 804px height which overflows into your footer. Keep in mind things behave differently in a flexbox versus a layout grid.

Your options are this:

Option 1:
Keep the flexbox container. You will need to do the following:
1. Right click on the photo gallery, select flexbox and set the flex grow and flex shrink to 1. This allows the gallery to expand and shrink.
2. Add the following CSS code:

Code: Select all

<style>
#wb_PhotoGallery1{height:auto !important;}
</style>

If you want to limit the width of the gallery, then set a max-width on the flexbox container.

Option 2:
Use a 1 column layout grid instead of a flex container. Set a max width on the grid to limit the overall width of the gallery.

To me, option 2 is the easiest.