Archived topic
How to achieve this styling?
7 replies · Started by RJ on February 1, 2020
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
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 :)
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
Try the updated CSS: https://generatepress.com/forums/topic/how-to-achieve-this-styling/#post-1151476
Thanks, Tom. It still shows a line rather than dots. But no probs. More a preference than an expectation. Cheers.
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;
}Thanks David. That worked :-)
Cheers, Robin
Glad we could be of help
