- This topic has 9 replies, 5 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
June 7, 2016 at 9:48 am #200028
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 thanksJune 7, 2016 at 10:02 am #200046Tom
Lead DeveloperLead DeveloperThe 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-developmentJune 7, 2016 at 9:49 pm #200181jackienotman
Thanks Tom
June 8, 2016 at 12:19 am #200209Tom
Lead DeveloperLead DeveloperYou’re welcome ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 11, 2016 at 8:54 am #201077Dan
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
June 11, 2016 at 10:57 am #201109Tom
Lead DeveloperLead DeveloperYou 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 6 years, 7 months ago by
Tom.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 15, 2019 at 1:11 am #1034905domedele
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/October 15, 2019 at 8:08 am #1035319David
StaffCustomer SupportHi 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/October 15, 2019 at 12:45 pm #1035612domedele
Thanks it work!(with a blank row…)
October 15, 2019 at 2:47 pm #1035673David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
This reply was modified 6 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.