Docs

[sandra.i]

Hello

I would like to add 3 horizontal divider lines for the columns in my blog index page, could you help me do this?

[sandra.i]

This reply has been marked as private.

[sandra.i]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.blog .x-iso-container.cols-3>.hentry {
    -webkit-box-shadow: 1px 1px 2px 0px rgba(212, 189, 189, 0.75);
    -moz-box-shadow: 1px 1px 2px 0px rgba(212, 189, 189,0.75);
    box-shadow: 1px 1px 2px 0px rgba(212, 189, 189,0.75);
}

Hope it helps 🙂

[sandra.i]

Hi

yes that great thanks!

Could I ask a couple of things:

1 – how do I change the colour to plain black, with no shadow?

2 – the line on the left side of the page is missing

3 – the line on the right hand of the page is slightly out of alignment, it too far right

Could you help me fix these?

Thanks

[Rupok]

Hi there,

Let’s try this :

.blog .x-iso-container.cols-3 > .hentry {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

Let us know if that works for you.

[sandra.i]

Hi

Thanks for that. That looks better but it looks like

– the border is being doubled up in the column in the middle

– the bottom horizontal divider is now missing

– the whole section is wider than the normal page width

Could you have another look?

[Friech]

Hi There,

#1 Please update the given css code to this:

.blog .x-iso-container.cols-3 > .hentry {
	    border-left: 1px solid #d5cece;
}
.blog .x-iso-container.cols-3 > .hentry:nth-child(3n) {border-right: 1px solid #d5cece;}

#2 Add this on your custom CSS

.x-colophon.top {
	border-top: 1px solid #d5cece;
    margin-top: 16px;
}

#3 Lets add a bit of a margin on both sides of the container.

.site #x-iso-container {
    margin-left: 0.5%;
    margin-right: 0.5%;
}

Hope it helps, Cheers!

[sandra.i]

This reply has been marked as private.

[sandra.i]

This reply has been marked as private.

[Paul R]

Hi,

Please change the code that reads.

.blog .x-iso-container.cols-3 > .hentry:nth-child(3n) {
    border-right: 1px solid #d5cece;
}

with this

.blog .site #x-iso-container {
    border-right: 1px solid #d5cece;
}

Hope that helps.

[sandra.i]

This reply has been marked as private.

[Christopher]

Hi there,

Please update following code :

.blog .x-iso-container.cols-3 > .hentry {
    border-left: 1px solid #d5cece;
    padding: 15px;
    border-bottom: 1px solid #d5cece;
}
/* Format post metadata*/
.blog p.p-meta  {
    font-family: "Proxima nova",sans-serif;
text-align: center;
 text-transform: uppercase;
  padding-bottom:10px;
  padding-top:10px;
}

/*masonry blog body text*/
.blog .entry-content {
    font-size: 1em;
line-height: 1.4;
}

To :

.blog .x-iso-container.cols-3 > .hentry {
border-left: 1px solid #d5cece;
padding: 15px;
border-bottom: 1px solid #d5cece;
}
.blog p.p-meta {
font-family: “Proxima nova”,sans-serif;
text-align: center;
text-transform: uppercase;
padding-bottom: 0px;
padding-top: 0;
margin-top: 0;
}

.blog .entry-content {
font-size: 1em;
line-height: 1.4;
margin-top: 8px;
}

Add this code too :

.blog .x-iso-container.cols-3 > .hentry:last-child {
border-right: 1px solid #d5cece;
}

.x-colophon.top {
border-top: none;
}
`

Hope it helps.

[sandra.i]

This reply has been marked as private.

[Lely]

Hello There,

1. That is how it will work because of Masonry structure. nth-child selector has issue on Masonry structure. The border on the right was added on the whole part of the Masonry box. It seems missing in the inside because the content doesn’t reach that part.

2.) The date is above the title. Same with your screenshot.

3.) Add this custom CSS to remove / after the date

.p-meta>span:nth-child(2):after {
    content: '';
}

4.) Please use this:

.blog .site > .x-container.max.width.offset {
    margin-bottom: 0;
}

Cheers!

[Author]

Posts