Query loop customizing.

Hi Jusung,

Yes, we can help.

Can you provide a rough sketch of how the line should look like? Example - see the red lines: https://share.getcloudapp.com/nOu1XYng

On the link, on the content section, you can see the line that I am trying.

I see.

Can you remove the vertical lines you have right now, and add this code through Appearance > Customize > Additional CSS?:

.gb-grid-wrapper.gb-grid-wrapper-05a1ec58 > .gb-grid-column:not(:last-of-type):after{
    content: "";
    height: 80%;
    width: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    background-color: #000000;
    z-index: 100;
    transform:translateY(-50%);
}
.gb-grid-wrapper.gb-grid-wrapper-05a1ec58 > .gb-grid-column:not(:last-of-type) {
    position:relative;
}

It is working well!!

However, I need a border on the bottom too.

Can you help with it?

When you see the link there is supposed to be a border under the content.
not only side but under the content.

Try adding this CSS as well:

.gb-grid-wrapper.gb-grid-wrapper-05a1ec58:after {
    content: "";
    height: 0.5px;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #E0E3DA;
    z-index: 100;
}

.gb-grid-wrapper.gb-grid-wrapper-05a1ec58 {
    position:relative;
}

Thank you.

Can I just chage the width 100% to 97.6% to meet the edge of featured image
or is there other way to make it?

When I do 97.6%, the left part is ok but the right part is too long..
I need the same length of border by the featured image.

Oh sorry. It is ok now! when I change it to 97.7% of width, everything is ok!
Thank you!

You're welcome, Jusung!

For reference, the code should be something like this if you reduce the width from 100%:

.gb-grid-wrapper.gb-grid-wrapper-05a1ec58:after {
    content: "";
    height: 0.5px;
    width: 97.7%;
    position: absolute;
    bottom: 0;
    left: 50%;
    background-color: #E0E3DA;
    z-index: 100;
    transform:translateX(-50%);
}

.gb-grid-wrapper.gb-grid-wrapper-05a1ec58 {
    position:relative;
}