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 #2332614
layout
Closed

Comments

  • cravingsjournal started the conversation
    March 20, 2020 at 1:36am

    Hello,

    Can you send me the CSS code that I can use to make my search, category layout display 4 post per line on desktop and 2 post per line on mobile.

    I am using the Masonry Layout, I will also want my sidebar to show.

    Thanks.

  •  2,699
    PenciDesign replied
    March 20, 2020 at 4:15am

    Hi,

    To display sidebar for search, category pages, please enable sidebar via Customize > General Options > Enable Sidebar on Archive.

    It will be very small to read. But, you can add more this code to Customize > Custom CSS to do that:

    @media only screen and (min-width: 768px){
.container.penci_sidebar .penci-masonry .item-masonry, .penci-masonry .item-masonry{ width: 25%; }
.penci-masonry .item-masonry h2 a{ font-size: 15px; }
}
@media only screen and (max-width: 767px){
.container.penci_sidebar .penci-masonry .item-masonry, .penci-masonry .item-masonry{ width: 50% !important; }
.penci-masonry .item-masonry h2 a{ font-size: 15px; }
}

    Best Regards,

    PenciDesign

  • cravingsjournal replied
    March 27, 2020 at 2:36pm

    Hi!

    For a separate issue I had to change to grid instead of masonry. Could you help me with the same code but for the new layout please?

    Thank you very much for your help

    Lorena

  •  2,699
    PenciDesign replied
    March 27, 2020 at 4:21pm

    Hi,

    If so, please try add more this code to Customize > Custom CSS:

    @media only screen and (min-width: 768px){
    .container.penci_sidebar .penci-grid > li, .penci-grid > li.grid-2-style{ width: 23.5%; margin-right: 2%; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+1), .penci-grid > li.grid-2-style:nth-of-type(2n+1){ clear: none; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+2), .penci-grid > li.grid-2-style:nth-of-type(2n+2){ margin-right: 2%; }
    .container.penci_sidebar .penci-grid li:nth-of-type(4n+4), .penci-grid > li.grid-2-style:nth-of-type(4n+4){ margin-right: 0; }
    .container.penci_sidebar .penci-grid li:nth-of-type(4n+1), .penci-grid > li.grid-2-style:nth-of-type(4n+1){ clear: both; }
    .penci-grid li .item h2 a{ font-size: 15px; }
}
@media only screen and (max-width: 767px){
    .container.penci_sidebar .penci-grid > li, .penci-grid > li.grid-2-style{ width: 48.05% !important; margin-right: 3.9% !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+1), .penci-grid > li.grid-2-style:nth-of-type(2n+1){ clear: both !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+2), .penci-grid > li.grid-2-style:nth-of-type(2n+2){ clear: none !important; margin-right: 0 !important; }
    .penci-grid li .item h2 a{ font-size: 15px; }
}

    Best Regards,

    PenciDesign

  • cravingsjournal replied
    March 28, 2020 at 8:07pm

    Hi, thank you!

    It looks perfect on mobile but weird on desktop: https://cravingsjournal.com/page/2/?s=chocolate

    Is there a correction we can do?

    Thanks!

    Lorena

  •  2,699
    PenciDesign replied
    March 29, 2020 at 3:44am

    Hi,

    Please try replce the code I send to this code:

    @media only screen and (min-width: 768px){
    .container.penci_sidebar .penci-grid > li, .penci-grid > li.grid-2-style{ width: 23.5% !important; margin-right: 2% !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+1), .penci-grid > li.grid-2-style:nth-of-type(2n+1){ clear: none !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+2), .penci-grid > li.grid-2-style:nth-of-type(2n+2){ margin-right: 2% !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(4n+4), .penci-grid > li.grid-2-style:nth-of-type(4n+4){ margin-right: 0 !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(4n+1), .penci-grid > li.grid-2-style:nth-of-type(4n+1){ clear: both !important; }
    .penci-grid li .item h2 a{ font-size: 15px; }
}
@media only screen and (max-width: 767px){
    .container.penci_sidebar .penci-grid > li, .penci-grid > li.grid-2-style{ width: 48.05% !important; margin-right: 3.9% !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+1), .penci-grid > li.grid-2-style:nth-of-type(2n+1){ clear: both !important; }
    .container.penci_sidebar .penci-grid li:nth-of-type(2n+2), .penci-grid > li.grid-2-style:nth-of-type(2n+2){ clear: none !important; margin-right: 0 !important; }
    .penci-grid li .item h2 a{ font-size: 15px; }
}

    Best Regards,

    PenciDesign