Archived topic
Styling of two column layout with background image
1 reply · Started by Abid on September 4, 2020
Hi there,
Having some trouble styling the 'Enterprise section'on this page http://abidn10.sg-host.com/tour as per the design: http://abidn10.sg-host.com/wp-content/uploads/2020/09/Screenshot-2020-09-04-at-11.01.09.png
Could you please advise on what I need to do to replicate the design?
Thanks,
Neil
Hi there,
currently there are several options but they all require a little bit of code. The next version of GB and the future GB pro will make this easy.
I would do the following:
1. In the left Grid column. Add a background image. Give the column a Settings > Advanced > Additonal CSS class of has-svg
2. Inside the left grid column add a HTML widget and add this code:
<div class="svg-container">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="80,100 100,0 100,100"></polygon>
</svg>
</div>
3. Add this CSS:
.has-svg {
position: relative;
}
.svg-container svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
fill: #f00; /* Set color here */
}