Increase gap | PenciDesign Support

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Let's replace it with this CSS:

@media only screen and (min-width: 768px) {
    .penci-grid>li.grid-2-style {
        padding-left: 30px;
    }
    .container.penci_sidebar .penci-grid li:nth-child(2n),
    .penci-grid li.grid-2-style:nth-child(2n) {
        padding-left: 0;
        padding-right: 30px;
    }
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

it seems that it is impossible?

Right column steel have this margin that i don't want and now images in right colums have less height than left columns images

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please delete all the previous CSS code related to this area, then add this CSS code:

@media only screen and (min-width: 768px){
    .penci-grid > li.grid-2-style {
        padding-right: 30px;
    }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+2),
    .penci-grid li.grid-2-style:nth-of-type(2n+2) {
        padding-left: 30px;
    }
}

Change 30px to the spacing you want to show.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

with print sceen

Rboullay replied

4 years ago

Customer Reply

doesn't work

i need a bigger row and you gived me a solution like my first code i send you

the problem when you done a code like that is that third lines of post are crashed

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please modify the CSS like this:

.penci-grid > li.grid-2-style {
  width: 49.5%;
  margin-right: 1%;
}
.penci-grid li.grid-2-style:nth-of-type(3n+3) {
  margin-right: 1%;
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Thanks but it doesn't work has i expect

center row gap is thinner and not bigger and there is now a right margin in the right column images are not align to the right

in the right column i need to keep margin to 0 and increase middle gap

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-grid > li.grid-2-style {
  width: 49%;
  margin-right: 1%;
}
.penci-grid li.grid-2-style:nth-of-type(3n+3) {
  margin-right: 1%;
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Hello,

here a screen shot with in red the explanations.

PAge are category ones

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please send me the screenshot of the layout you want to show. I'll check and send you a custom CSS.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

It is done but doesn t work has i expect

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please delete the code:

.penci-grid li.grid-2-style:nth-of-type(3n+3) {
margin-right: 0px !important;
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

i understand but i want right column images to still align to the right like it was (liaaligngn with bg image)

further more the left image on the second line have not the same margin right like others with your code

so ive set

.penci-grid > li.grid-2-style {
width: 48.05%;
margin-right: 3.9%;
}
.penci-grid li.grid-2-style:nth-of-type(3n+3) {
margin-right: 0px !important;

}

but i still have problem with second line of posts?

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

You've added the wrong code, if you want to show 4% of margin, here is a CSS code:

.penci-grid > li.grid-2-style {
  width: 46%;
  margin-right: 4%;
}

Note: total value of width and margin MUST equal 50%.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

here is the print screen

Rboullay replied

4 years ago

Customer Reply

hello,

sorry but with this code the image right post column is no more align to the right (right of big image)

ive set this code

.penci-grid > li.grid-2-style {
width: 48%;
margin-right: 4%;
}
.penci-grid li.grid-2-style:nth-of-type(3n+3) {
margin-right: 4%;

}

The 4st first post is right but then i receive an graphic error

i ve only post on the right column

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-grid > li.grid-2-style {
  width: 49%;
  margin-right: 1%;
}

Regards,
PenciDesign.

Rboullay started the conversation

4 years ago

Conversation Start

Hello,

how can i do please in order to increase the size of the gap between two colums posts in category pages please?