[TheSydneySiders]

Hi,

I have featured posts on my homepage, which I set under the Home Page Settings > Featured Content Options. I want to add a border around each of the featured posts that show on my homepage and am trying to use the following code

#featured-post { 
border: 4px solid #909499;
display: block;
    padding: 10px 2%;
    height: 10%;
}

This however, only places one large border around all off the featured posts. Can you please advise how to alter the code so that each posts gets its own individual box/border?

I would post the url, however my site is not yet live.

Thank you

[Sakin]

@TheSydneySiders: You can add border in the following css. But do to responsive design you need to adjust the width of each box as well.
#featured-post .post { }

[TheSydneySiders]

Thank you that worked great.

How can I reduce the amount of white space between the boxes?

Thank you very much for your help.

[Sakin]

@TheSydneySiders: You can increase the width and decrease the margin left in the following css and add it in “Appearance => Theme Options => Custom CSS” box.

@media screen and (min-width: 768px) {
#featured-post .post {
    margin-left: 5%;
    width: 30%;
}
}

[Author]

Posts