Summaries in grid layout.

Hi,

My homepage has a lot of Summaries in grid layout. 

Is there a way to make the grid of summaries to follow a rule: Items per row. Can be edited in a blog, why not in the summary.

Thanks,

https://hiddengallery.cz

How many items per row? For desktop/mobile

Hi,

On my index basically 2 per row. 

The summary of product will be probably 4. But I think I could change to code in the future. 

Mobile all 1 per row.

Only Podcast I think could be 2 rows. 

Thanks,

On 1/29/2024 at 3:30 AM, FilipKar said:

Hi,

 

On my index basically 2 per row. 

The summary of product will be probably 4. But I think I could change to code in the future. 

 

Mobile all 1 per row.

Only Podcast I think could be 2 rows. 

 

Thanks,

 

You mean change this to 2 items/row on mobile?

yes, a Think that would look better. Especially if I want to feature latest 4 episodes. 

Add this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item {
    width: calc(~"50% - 20px") !important;
    float: left !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
}

Cool,

and is possible to force summaries to be 4 in a row on laptop? My 13inch looks great but 15inch there is empty space. 

I want to be the same across all sizes. Thanks,

On 2/6/2024 at 4:57 AM, FilipKar said:

Cool,

and is possible to force summaries to be 4 in a row on laptop? My 13inch looks great but 15inch there is empty space. 

I want to be the same across all sizes. Thanks,

Use this 

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item {
    width: calc(~"25% - 20px") !important;
    float: left !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
}

Cool, Thanks,

is it possible to center the podcast? 

Use this new code

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item {
    width: calc(~"25% - 20px") !important;
    float: left !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1704638721399_15110 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
div#block-yui_3_17_2_1_1704638721399_15110 .summary-thumbnail-container img {
    width: 100% !important;
    height: auto !important;
}
}

This works in sqaurespace preview but not in my iPhone SE2. On iPhone there is each image separate full width. 

On 2/13/2024 at 7:13 PM, FilipKar said:

This works in sqaurespace preview but not in my iPhone SE2. On iPhone there is each image separate full width. 

Can you take a screenshot of problem?