Jump to content

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

Recommended Posts

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!

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

imageedit_1_2946035778.jpg

Edited by 7TK
Link to comment

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;
  }
}
Edited by 7TK
Link to comment
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

Edited by noahawaii
Link to comment
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
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

Screen Shot 2022-05-05 at 8.45.16 AM.png

Link to comment
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.

 

Screen Shot 2022-05-05 at 8.45.16 AM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.