Hi Chris

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.blog-items.columns-2 {

    grid-template-columns: 50% 50%;

}

Ciaran

Hi Ciaran

This results in the column extending slightly less far beyond the template border. But it's still too wide and doesn't really fit within the boundaries of the template. Or rather: it does not respect the padding of the template border.

Thank you and kind regards
Chris

Hi Chris

Thank you for the update. Could you try the following instead...

.blog-items.columns-2 {

    grid-template-columns: 50% 50%;

    column-count: auto;

    column-gap: 1rem;

}

Ciaran

Hi Ciaran

Yes! It is perfect now.

Thank you very much and kind regards
Chris

Hi Ciaran

I'm afraid I have to come back to this topic again. The css code you proposed above has the side effect of enforcing the two-column blog layout on mobile screens as well. So I added a media query in order to avoid these two columns:

@media only screen and (min-width: 959px) {

  .blog-items.columns-2 {

      grid-template-columns: 50% 50%;

      column-count: auto;

      column-gap: 1rem;

  } 

}

I hope I did it right?!
The unwanted two-column layout for mobile screens needs to be taken into account, if you are planning to implement this amendment to a future version of this template.

Thank you and kind regards
Chris

Hi Chris

Thank you for sharing your solution. That looks perfect, you are ensuring the CSS is only applied to screensizes above 959px in width.

Ciaran