[Support request] mansory layout issue

[jasond]

Hello, can you help to advise how to fix blockquote icon issue on the first card of second column? It seems to be cut off from the last card of first column.

Thanks a lot

[David]

Hi there,

its because of the column-count CSS you’re using. Whatever method you use to move the quote element outside of the parent container will cause it to flow back up the columns.

To fix this you would need to add more containers eg.

<div class="parent-container">
    <div class="quote-badge">
        <div class="content-wrap">
            <!-- all content goes in here -->
        </div>
    </div>
</div>

.parent-container {
    /* This requires enough top padding to accommodate the quote badge */
}
.content-wrap {
    /* your content styles go here include border radius and drop shadow */
}

This method will allow you to move the badge up into the padding area of the parent-container. Whilst the card style is set on the content-wrap.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts