Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3092425
Increase gap
Closed

Comments

  • Rboullay started the conversation
    July 27, 2022 at 1:29pm

    Hello,

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

  •  2,489
    PenciDesign replied
    July 27, 2022 at 2:55pm

    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 replied
    July 27, 2022 at 3:02pm

    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

  • Rboullay replied
    July 27, 2022 at 3:05pm

    here is the print screen

  •  2,489
    PenciDesign replied
    July 27, 2022 at 3:19pm

    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
    July 27, 2022 at 3:23pm

    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?



  •  2,489
    PenciDesign replied
    July 27, 2022 at 5:56pm

    Hi,

    Please delete the code:

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

    Regards,
    PenciDesign.

  • Rboullay replied
    July 27, 2022 at 6:19pm

    It is done but doesn t work has i expect 

  •  2,489
    PenciDesign replied
    July 28, 2022 at 2:59am

    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
    July 28, 2022 at 5:34am

    Hello,

    here a screen shot with in red the explanations.

    PAge are category ones

  •  2,489
    PenciDesign replied
    July 28, 2022 at 6:14am

    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
    July 28, 2022 at 6:34am

    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

  •  2,489
    PenciDesign replied
    July 28, 2022 at 7:06am

    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
    July 28, 2022 at 7:26am

    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

  • Rboullay replied
    July 28, 2022 at 7:26am

    with print sceen

  •  2,489
    PenciDesign replied
    July 28, 2022 at 7:47am

    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
    July 28, 2022 at 7:50am

    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

  •  2,489
    PenciDesign replied
    July 28, 2022 at 7:55am

    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.