[Resolved] How to achieve this styling?

[Robin]

Hey there – not sure if this is something you can help me with, but I want to be able to make a list of articles look like this – https://www.screencast.com/t/a2aNMz6HZ

I’m having a problem with the ….. not aligning and looking buggy on mobile devices.

TIA, Robin

[Tom]

Hi there,

Try setting up your HTML like this:

<div class="archive-line">
    <span class="archive-name"><a href="https://robinharford.com/cecily-parsley/">Cecily</a></span>
    <span class="archive-border"></span>
    <span class="archive-date">November 2nd</span>
</div>

Then add this CSS:

.archive-line {
    display: flex;
    font-style: italic;
}

.archive-border {
    flex-grow: 1;
    height: 1px;
    background: aliceblue;
    align-self: center;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 1px dotted #ddd;
}

Hope this helps 🙂

[Robin]

That’s perfect Tom. Many thanks. Is there any way to make the line a series of dots ( …. ) or am I stuck with the horizontal line?

Either way, thanks again.

Robin

[Tom]

Try the updated CSS: https://generatepress.com/forums/topic/how-to-achieve-this-styling/#post-1151476

[Robin]

Thanks, Tom. It still shows a line rather than dots. But no probs. More a preference than an expectation. Cheers.

[David]

Hi there,

try this CSS:

.archive-line {
    display: flex;
    font-style: italic;
}

.archive-border {
    flex-grow: 1;
    height: 1px;
    align-self: center;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 1px dotted #222;
}

[Robin]

Thanks David. That worked 🙂

Cheers, Robin

[David]

Glad we could be of help

[Author]

Posts