The grid plugin does not show up in footer

Hey there,
added a “the grid” gallery in my footer and my body. only the one in the body appears.
Thanks for your help

Hello @zerotoone.de,

Did you added the Grid shortcode in a content area element? Please make sure that the container of the element is set like this:

Hope this helps.

still no difference

Hi @zerotoone.de,

In that case, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

added, please have a look

Hello @zerotoone.de,

I have logged in and edited your footer. I ended up adding a custom element css in the content area element setting its width and height:

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

Please check your footer now.

thank you, I can see the gallery now, how to I center it horizontally?

Hello @zerotoone.de,

You can center the grid by setting the maximum width to the actual width of the grid which is 1180. You might need to update the css code into this:

$el {
  min-width: 100%;
  max-width: 1180px;
  min-height: 220px;
  margin: 0 auto;
}

We would loved to know if this has work for you. Thank you.

nope did not work

Hello @zerotoone.de,

I have edited your footer and the grid is now centered.
I used this code by the way;


$el {
  min-width: 1180px;
  max-width: 1180px;
  min-height: 220px;
  margin: 0 auto;
}

If you need anything else we can help you with, don’t hesitate to open another thread.

thank you looks good, however you should try to open the page on mobile and look at the grid in the footer

Hi @zerotoone.de,

Please change the given CSS to this

@media ( min-width: 1180px ) {
$el {
  min-width: 1180px;
  max-width: 1180px;
  min-height: 220px;
  margin: 0 auto;
}
} 

So it will not still the same on devices smaller than the grid.

Hope this helps.

this looks awful, what is wrong with the footer editor that comes with pro? this is a shame

Hi @zerotoone.de,

It’s because of the padding of your bar #4. I’ve changed it to 0 and the grid looks good now:

Regards!

thank you, now the grid does not show up on mobile

Hello @zerotoone.de,

Thanks for updating the thread. :slight_smile:

On my end I can see the Grid items in mobile screens. Maybe you can try to clear the cache and see how it goes. Can you let us know the device you are using to access the website?

Thanks.

so I tried it again, on an entirely new blackberry key2 with chrome browser. The grid does not show up

Hey @zerotoone.de,

The issue here is that the Content Area element relies on the content, which is The Grid in this case, to fill the space. But, The Grid also relies on the container’s size which is the Content Area element. That’s why my colleagues provided custom CSS so to give a specific size to the Content Area. The given CSS however is only for laptop screens and above.

The screenshot below shows the Content Area collapsed on mobile view.

The only important factor here is the element’s width. The Content Area element does not have that option so custom CSS is needed. There’s an element that you can use that will not need custom CSS and will display The Grid in any screens. That element is the Text element.

I copied The Grid shortcode and pasted it in a Text element and then I’ve hidden the Content Area element in all screen sizes using the Hide During Breakpoints feature.

Out of the box, The Grid will also not display in the Text element because it’s width is auto by default. Setting a specific value like 80% gives the Text element a size which The Grid can use for calculating the size of it’s display.

The result, The Grid shows up in mobile screens like it would in the Content Builder.

You can delete the Content Area element.

Hope that helps.

this is all to “workaround” for me. please just make the footer editor easier to use, just like the content editor.
Thank you

Glad to hear it’s working now.