Feature boxes

[jackienotman]

I wanted to create 3 feature boxes side by side on my page very much like the way the add ons are displayed on the GP page) and thought I might be able to do this with the sections add on but these just seem to sit on top of each other.

Any tips on how to do this or is it a possible add on for the future?
Many thanks

[Tom]

The boxes on our add-ons page use quite a bit of custom CSS to achieve the look – you’re welcome to use the inspect element tool in your browser to take the CSS and get a similar look.

I would suggest a plugin like this to create columns: https://wordpress.org/plugins/lightweight-grid-columns/

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[jackienotman]

Thanks Tom

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Hi Tom,

How do you best recommend to style the columns created using the lightweight grid plugin please?

E.g. if you wanted 3 yellow columns side by side – with a gap between each

Thanks

[Tom]

You can give the columns a class, for example: http://screencast.com/t/q2b2OWBG

Then add the CSS:

.my-columns {
    padding: 10px;
    margin-right: 10px;
    background-color: yellow;
}

If you want to add a border:

.my-columns {
    padding: 10px;
    border: 1px solid #DDD;
}

• This reply was modified 5 years, 5 months ago by Tom.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[domedele]

How can made some height to three box?
I use equal_heights=”true” in this example but the result is wrong
https://cheariatira.altervista.org/home/

[David]

Hi there,

the columns themselves are the same height – but this doesn’t control the height of the content within. If you want to force the buttons to the bottom of the column you could add this CSS:

.inside-grid-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inside-grid-column p:nth-of-type(1) {
    margin-bottom: auto !important;
}

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

[domedele]

Thanks it work!(with a blank row…)

[David]

You’re welcome

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

[Author]

Posts