How can I create a border around each list item?

[matthewbertweb]

https://github.com/matthewbert86/frontity-site

I am trying to create a border around each individual post feature on the blog page. So far, all I can get is just a border top along the whole list, like in this photo

Anyone happen to have a solution on how to target each individual post and get a border around each one?

Thank you!

[phn]

Like this?

I just quickly added the following CSS to the Post Wrapper element

padding: 12px;
border: 6px solid;

[matthewbertweb]

Hey, that looks like it may have been from mentalgeek.netlify.app - that was a gatsby markdown site I built. But the github repo is to turn that site into a frontity site. So the code is different.

Mentalgeek.vercel.net is what the github repo is based on now.

[matthewbertweb]

Also, I updated the repo so it should match what is currently on mentalgeek.vercel.net

[phn]

Oh, have u tried to head over to packages/mars-theme/src/components/list/list-item.js and replace the with an styled.article (StyledArticle)?

from:

<article>...</article>

TO

<StyledArticle>
.... 
</StyledArticle>

and then define the Styled article on the bottom?:

const StyledArticle = styled.article`
   padding: 12px;
   border: 6px solid;
`;

[matthewbertweb]

Thank you! That worked perfectly!!!