[Support request] Styling of two column layout with background image

[Abid]

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

[David]

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 */
}

[Author]

Posts