The Grid in Footer

Hi, I’m using The Grid to display an Instagram feed in a Footer. While I know it doesn’t work placing a Content Area directly in the Footer so I use a Global Block containing the Content Area and pull that into the Footer. It works great until the screen size is under 768px then it disappears. I can’t work out what breakpoint is doing what and whether it is a plugin problem or a Pro flex layout problem.

Just for comparison, I’ve also put the same Global Block as a section on the page and it behaves as expected at all screen sizes.

Any help to work out what is going on would be much appreciated.

Thanks

Hi @seepops,

Please make sure you didn’t enable any Hide During Breakpoints options of your section/row under Customize tab:

If it still doesn’t help, please provide us with your website URL so we can take a closer look.

Thank you.

Hi @thai,

Thanks for your response. I’ve checked that and none of these are set.

Website URL in the secure note.

Thanks

Hi There @seepops

Upon testing, I was able to reproduce your issue on my end. However I don’t see any hide during breakpoints options set or any other custom CSS rules hiding those elements.

To further troubleshoot the issue, can you please remove any custom CSS/JavaScript added to the site and re-test your issue further.

If you’re still having issues, then you can disable your child theme to see if you’re having any conflicts with your child theme customizations.

Further, you also need to disable your 3rd party plugins to see if you’re having any conflicts with your 3rd party plugins. If the issue is resolved, then you can activate your plugins one by on to see which plugin causing the issue.

Also make sure to clear all caches when testing by following this guide (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

In case if you cannot isolate the issue, provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

Hi @mldarshana,

Thanks for checking this out. I’m glad you can see the issue I’m having.

I’ve carried out everything you have mentioned but it has no effect. In fact I’ve tried it on a fresh install and no plugins at all and it still behaves in the same way.

Login details are in the secure note.

Thanks
Chris

Hi Chris,

You can try adding this in Footer > CSS

@media(max-width:767px) {
.my-grid .tg-grid-holder.tg-layout-grid {
    left:0 !important;
    width:100% !important;
}
}

Hope that helps

Hi @paul.r,

Thanks for your response. I’m afraid that doesn’t work.

Thanks

Hi Chris,

It’s all due to flex layout, I recommend adding minimum height and width to your global block. Example, add this CSS to gobal block’s Element CSS

$el {
min-height: 200px;
width: 100%;
}

This shouldn’t limit the size of the grid, but just put a minimum size for smaller views.

Thanks!

@Rad, BOOM! That’s it! Thank you so much.

You’re welcome!
We’re glad we were able to help you out.

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