layout | PenciDesign Support

PenciDesign replied

6 years ago

Staff Reply

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

cravingsjournal replied

6 years ago

Customer Reply

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

PenciDesign replied

6 years ago

Staff Reply

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

6 years ago

Customer Reply

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

PenciDesign replied

6 years ago

Staff Reply

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 started the conversation

6 years ago

Conversation Start

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.