7TK Posted April 25, 2022 Share Posted April 25, 2022 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
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 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
7TK Posted April 28, 2022 Author Share Posted April 28, 2022 (edited) 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! Edited April 30, 2022 by 7TK Link to comment
7TK Posted April 30, 2022 Author Share Posted April 30, 2022 (edited) 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 April 30, 2022 by 7TK tuanphan 1 Link to comment
noahawaii Posted May 1, 2022 Share Posted May 1, 2022 (edited) 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 May 1, 2022 by noahawaii Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 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
noahawaii Posted May 5, 2022 Share Posted May 5, 2022 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. Link to comment
tuanphan Posted May 8, 2022 Share Posted May 8, 2022 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 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
noahawaii Posted May 8, 2022 Share Posted May 8, 2022 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; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment