Reducing number of grid blocks per row in specified width range - new question

Site URL: https://www.frjameslloyd.com/blog

Hi Everyone!  

My new site blog has four grid blocks per row when viewed on a desktop and one block per row when viewed on a phone - those features are fine.

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 blog is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px.

I've tried the following code (kindly suggested by someone in these forums) which worked perfectly on another site I'd created last year, but it doesn't seem to work on this new site:

@media (min-width:751px) and (max-width:1024px) {
    .blog-basic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

If anyone has any other suggestions, I'd be very grateful! 🙂 I'm using a basic grid block template.

Thank you in advance!

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:1024px) and (min-width:768px) {
.tweak-blog-basic-grid-width-full .blog-basic-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: auto !important;
    grid-gap: 20px !important;
}
}

Thanks so much, @tuanphan!  That reduced the grid blocks down to two per row, for  those screen dimensions.

The only problem is that now all the entries that were originally in the left two columns are now appearing strangely as vertical script on the left side of the screen. I've attached a screenshot and circled the problem area in blue.

Also, if you were to scroll down on the real page (on a tablet or iPad), you'd see there's a large amount of space before the next two entries appear...

Do you know how I could fix both of the above issues?

Thanks so much for your assistance!

Update: I was able to resolve the additional problems mentioned above by using the following code posted by @dvgdvgdvg 

Thank you @tuanphanand @dvgdvgdvg!

@media screen and (min-width:768px) and (max-width: 1024px) {
  .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 40px !important;
  }
  .blog-basic-grid .blog-list-pagination {
    grid-column-end: 3 !important;
  }
}

On 4/26/2022 at 9:14 PM, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:1024px) and (min-width:768px) {
.tweak-blog-basic-grid-width-full .blog-basic-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: auto !important;
    grid-gap: 20px !important;
}
}

 

Any ideas why I canʻt get this to work? When I reduce the number of columns it just downsizes some of them without actually limiting the number to 3 which is was Iʻm looking for when I apply it to a certain width? 

https://noahlangphotography.com/blog

On 5/2/2022 at 1:01 AM, noahawaii said:

Any ideas why I canʻt get this to work? When I reduce the number of columns it just downsizes some of them without actually limiting the number to 3 which is was Iʻm looking for when I apply it to a certain width? 

https://noahlangphotography.com/blog

It looks like you solved with this code?

@media screen and (min-width: 768px ) {
    .blog-basic-grid {
        display:grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-column-gap: 50px;
        grid-row-gap: 100px;
        grid-auto-rows: min-content
    }

    .blog-basic-grid .grid-item .grid-image {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0
    }

    .blog-basic-grid .grid-item .grid-image .grid-image-inner-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .blog-basic-grid .blog-list-pagination {
        grid-column-start: 1;
        grid-column-end: 5
    }
}

@media screen and (min-width: 768px ) {
    .blog-basic-grid {
        display:grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-column-gap: 50px;
        grid-row-gap: 100px;
        grid-auto-rows: min-content
    }

    .blog-basic-grid .grid-item .grid-image {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0
    }

    .blog-basic-grid .grid-item .grid-image .grid-image-inner-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .blog-basic-grid .blog-list-pagination {
        grid-column-start: 1;
        grid-column-end: 5
    }
}

10 hours ago, tuanphan said:

It looks like you solved with this code?

@media screen and (min-width: 768px ) {
    .blog-basic-grid {
        display:grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-column-gap: 50px;
        grid-row-gap: 100px;
        grid-auto-rows: min-content
    }

    .blog-basic-grid .grid-item .grid-image {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0
    }

    .blog-basic-grid .grid-item .grid-image .grid-image-inner-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .blog-basic-grid .blog-list-pagination {
        grid-column-start: 1;
        grid-column-end: 5
    }
}

@media screen and (min-width: 768px ) {
    .blog-basic-grid {
        display:grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-column-gap: 50px;
        grid-row-gap: 100px;
        grid-auto-rows: min-content
    }

    .blog-basic-grid .grid-item .grid-image {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0
    }

    .blog-basic-grid .grid-item .grid-image .grid-image-inner-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .blog-basic-grid .blog-list-pagination {
        grid-column-start: 1;
        grid-column-end: 5
    }
}

 

no I don't currently have that applied to my css, but even when I try to reduce it to 3 columns at any px, I get what you see in the picture below. I haven't found a way to reduce the columns and make them look even.

On 5/6/2022 at 1:48 AM, noahawaii said:

no I don't currently have that applied to my css, but even when I try to reduce it to 3 columns at any px, I get what you see in the picture below. I haven't found a way to reduce the columns and make them look even.

 

Which code did you add in this case?

Quote

 I try to reduce it to 3 columns at any px, I get what you see in the picture below

8 hours ago, tuanphan said:

Which code did you add in this case?

 

.blog-basic-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 50px;
    grid-row-gap: 100px;
    grid-auto-rows: min-content;
}