[Resolved] Query loop customizing.

[Jusung]

Hello. I am trying to make query loop on the front page.

As you can see on the site, the line is too long.
the line is not supposed to be connected.

I want to make the line at the same location with the end of featured image.
Could you help with this/.?

[Fernando]

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

[Jusung]

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

[Fernando]

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;
}

[Jusung]

It is working well!!

However, I need a border on the bottom too.

Can you help with it?

[Jusung]

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

[Fernando]

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;
}

[Jusung]

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?

[Jusung]

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.

[Jusung]

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

[Fernando]

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;
}

[Author]

Posts