Archives grid Post template on mobile

I found it, it’s in wp core, not the theme.
i used this css to keep two columns for page archives even on mobile

@media (max-width: 600px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

• This reply was modified 1 year ago by chillmen. Reason: add code

Thanks for this. I have been trying to set up extra breakpoints to get 1 x column with mobile and 2 x with tablet but my code isn’t working.

Please advise.

@media (max-width: 480px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}

@media (max-width: 768px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

Hi, It worked for me like this : ( I’m not an expert do tests )
Check also this links :
https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
And this : https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

@media only screen and (max-width: 450px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
@media only screen and (min-width: 460px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

Hi @chillmen, thank you so much will have a look at it.

All the themes I used before had adjustable breakpoints, so I never had to add custom CSS. I quickly realised that this was the first ‘minus’ with TTF.

It will need a lot of custom CSS also for the other elements, for responsiveness.

Something isn’t right for me, not sure if it’s the theme that only allows 2 x breakpoints for some reason; at 600px I get 2 x columns instead of one and at 768px I get 1 x column instead of two! At 992px it’s ok though, it shows 3 x columns as it should. It’s r’eversing’ what’s in the css below for 600px/768px:

@media only screen and (min-width: 600px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}

@media only screen and (max-width: 768px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media only screen and (min-width: 992px) {
.wp-block-post-template-is-layout-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}