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

Home Forums Support Styling of two column layout with background image

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1430478
    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

    #1430573
    David
    Staff
    Customer Support

    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 */
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.