reduce number of grid blocks per row for specified width range

Site URL: https://www.frjohnharvey.com/featured-articles

Hello - I'd be grateful for some guidance.  🙂  I've added a page to my site which has four grid blocks per row when viewed on a desktop - that's fine.  When viewed on a phone, there's just one block per row and that's fine too.

What I'd like to do is add custom css (I'm on a personal plan) which shows only two blocks per row when the page is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px.

I've tried following some of the coding already provided in these forums, but I must be doing something wrong, because I can't get it to work.

Thank you in advance!

13 minutes ago, 7TK said:

Site URL: https://www.frjohnharvey.com/featured-articles

Hello - I'd be grateful for some guidance.  🙂  I've added a page to my site which has four grid blocks per row when viewed on a desktop - that's fine.  When viewed on a phone, there's just one block per row and that's fine too.

What I'd like to do is add custom css (I'm on a personal plan) which shows only two blocks per row when the page is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px.

I've tried following some of the coding already provided in these forums, but I must be doing something wrong, because I can't get it to work.

Thank you in advance!

Hi, i just write a code for your request. please apply it on your CSS editor
@media (min-width:751px) and (max-width:1024px) {
    .blog-basic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

2 hours ago, Agha_Waqas said:

Hi, i just write a code for your request. please apply it on your CSS editor
@media (min-width:751px) and (max-width:1024px) {
    .blog-basic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

Thank you so much!! 👍😀  That worked so easily! (I wish I'd asked for help hours ago...)