Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello Folks!
I’m trying to implement grid-properties in a Widget. (Pagebuilder)
I’ve created some declarationblocks inside the custom style.css:
.bluebox {
width: 250px;
height: auto;
margin: 0px 20px 40px 20px;
padding:5px 20px 20px 20px;
color: #ffffff;
background-color: #0062C7;
}
.bluebox-container{
display:flex;
flex-direction: row;
justify-content: center;
flex-wrap:wrap;
} The i gave the widget the bluebox-container class
Then i created div’s inside the widget:
<div class=bluebox><h1>Hack #1</h1>Lorem ipsum dolor sit amet</div> <div class=bluebox><h1>Hack #2</h1>Lorem ipsum dolor sit amet</div> <div class=bluebox><h1>Hack #3</h1>Lorem ipsum dolor sit amet</div>
But finally, the items inside the container now arrange as columns rather as rows.
I’ve tested it inside a sandbox-file i’ve created in brackets.
My question is: How can i implement flex-grids inside a editor-widget? I’ve also tried to wrap the inside of a but the result is the same.
Many thanks in advance!
Breezy
Hi Breezy
Thanks for reaching out.
Page Builder by SiteOrigin uses Flexbox for row, cell and widget layouts, if you’re implementing an additional Flexbox layout within the existing layout, that’s something you’d need to keep in mind. We’d love to dive into this problem with you, unfortunately, it’s a bit beyond the support scope we’re able to offer here on the forums. Sorry, I don’t have better news.