[Resolved] Footer with more than 6 columns in 1 row

[Eva]

Hi,

I am using the footer element to make a footer with 7, 8 or even more columns to show some clickable logos, trying to achieve something like this: https://aperfectday.amsterdam/. I used a grid with 6 columns, but I will need to add more logos and I can’t figure out how. There is probably a better way to do this (columns?). Moreover it doesn’t work properly on mobile.
Also I would like to add more info (address, mailchimp form etc) in the footer. I would like to know if I should add this to the footer element or use the footer widgets.

Thank you for your help!
Eva
Link to site in private info.

[Ying]

Hi Eva,

Do you want the logos to stay in 1 line on mobile as well like the example site?

If so, try this CSS:

.gb-grid-wrapper.gb-grid-wrapper-8ce7c80d > .gb-grid-column {
    width: auto;
}
.gb-grid-wrapper.gb-grid-wrapper-8ce7c80d {
    flex-wrap: nowrap;
}

To vertically align the logos, select the Grid block, set the vertical alignment to center.

I would like to know if I should add this to the footer element or use the footer widgets.

You can add them within the same element.

[Eva]

Hi Ying,

Thank you for your super fast reply! I want to have the logos in 1 line on desktop and all mobile devices. So I added the css, but now it looks weird on mobile. The logo’s are quite big and don’t scale anymore on mobile… Is there another solution maybe? And how can I add extra grid columns?

Thank you again,
Eva

[Eva]

Hey! I just found out that it works when I just use part of the CSS:

.gb-grid-wrapper.gb-grid-wrapper-8ce7c80d {
flex-wrap: nowrap;
}

So thank you, Ying!

The only thing is that the logo’s won’t scale of mobile. Any solution?
Thanks again,
Eva

[David]

Hi there,

are you wanting to keep all the logos in a single row on mobile ? But also make the logos larger ?
As thats not possible without the logos overflowing the screen or wrapping to new rows.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eva]

Hi David,

Thanks for your fast reply. Yes, I would like to keep the logos in 1 row on mobile. Actually, it looks quite good now in 1 row on my android phone. I don’t need the logos to be bigger, sorry for not being clear.
It would be great though if I could make the logo’s scalable so the are sharp on any device. But I don’t know if that’s possible…

Thanks again.

[David]

Aah ok, the best solution would be if the Logos were created as an SVG ( eg. in Illustrator ) so there are no pixels as such. Do you know if the original logos could be supplied as SVGs ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eva]

Thank you, David,
We were thinking about this, so I will ask them if the can supply SVG’s. From what I understand I should use a plugin like SVG support to upload add SVG’s, right?

[David]

Thats correct, you will require SVG Support or a similar plugin to allow you to upload the SVGs to your site.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eva]

Thanks again. So far I have uploaded 1 SVG logo using the Safe SVG plugin. Works well, waiting for more logos now.
So, I think I can mark this topic as Resolved 🙂

Thanks for the great support, as always!

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts