- This topic has 5 replies, 3 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
December 6, 2019 at 10:03 am #1096162Josh
I really like the columns on this page: https://generatepress.com/site-library/
that have a rollover and a bit of movement. Is this part of the GP library or is this custom?https://generatepress.com/premium/ – I’d be curious about these ones too. I love the movement and simplicity.
December 6, 2019 at 10:19 am #1096199LeoStaffCustomer SupportHi there,
That’s using Flexbox to create columns:
https://www.screencast.com/t/WzjM4RklYou can see all the code associated with it by using the browser inspector tool.
More on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
December 12, 2019 at 10:21 am #1102416JoshSo is it part of generate press or that code actually in the page as in the screenshot? It’s not a builder of some sort. Correct?
December 12, 2019 at 11:10 am #1102465DavidStaffCustomer SupportHi there,
No Pagebuilder just HTML and Flexbox which is a CSS Property that is supported by all modern browsers.
If you’re happy writing some HTML then this will get you started:<div class="flex-grid"> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> </div>
And this CSS:
/* Add flex to container */ .flex-grid { display: flex; flex-wrap: wrap; } /* Add gutters */ .flex-item { padding: 10px; box-sizing: border-box; } .flex-inner { /* Add styles to grid item container */ } /* Mobile width */ .flex-item { flex: 1 0 100%; } /* Tablet Width */ @media (max-width: 1024px) and (min-width: 768px) { .flex-item { flex: 1 0 50%; } } /* Desktop Width */ @media (min-width: 1025px) { .flex-item { flex: 1 0 33%; } }
December 12, 2019 at 11:15 am #1102470JoshPerfect. This is what I was doing. Just wanted to make sure I wasn’t missing anything.
December 12, 2019 at 11:16 am #1102475DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.