Line element overrides column border

[suzannereid]

Hi, I have a line element inbetween two recent posts and the border to the right has a column but the line somehow seems to override the border on the column and so puts a tiny little gap on the right border. Is there a way to fix this? I tried messing around with z-index but nothing worked.

URL: https://esther-live-rns-demo.pantheonsite.io/

The issue is near the bottom of the page in the POLITICS, HEALTH & LIFESTYLE and ARTS sections.

Thanks!

[alexander]

Hi @suzannereid,

This happens because your borders are on the recent posts elements. When the line is inserted, it creates new space in-between those two elements. There are a few things you can do here:

• Instead of placing a border on the Recent Posts element, put it on the Column itself.
• Use the border-bottom class you’ve used in other places instead of the Line element
• Add negative margin to the Line element equal to the height. This prevents the line from taking up actual space. For example, this Element CSS would work:

$el { margin-bottom: -2px; }

Aside:

Nice job building out a page like this! We’re working on a Layout Builder and new Post elements that will help create these types of layouts. You will certainly benefit from using those features once they’re available.

If you’re not using any server side caching, I would recommend being as aggressive as possible to cache this page. If I’m counting correctly, there’s 50+ Recent Posts elements on this page. This means 50+ database queries need to run on each page load. Your server seems pretty fast, but I could see this putting strain on the DB at peak times. The Layout builder elements will help with some behind the scenes performance optimizations, but for now, page caching would be your best line of defense to support a design like this.

[suzannereid]

Thank you!!

I appreciate your comments on the site. The information about the caching is very good to know as we have been having issues. I wish we could have waited until the Layout builder came out!

[rubin]

You’re welcome!