Changing breakpoints

Please implement that code in Additional CSS

@media(max-width: 1140px){
.is-col-1-2 .wrapper, .is-col-1-3 .wrapper, .is-col-1-4 .wrapper, .is-col-1-5 .wrapper, .is-classic .inner-wrapper .featImage, .is-classic .inner-wrapper .featImage + .postText, .is-classic .inner-wrapper .featImage + .postText + .postMeta, .is-col-1-1 .single-item, .is-col-1-2 .single-item, .is-col-1-3 .single-item, .is-col-1-4 .single-item, .is-col-1-5 .single-item {
    width: 48% !important;
}
}

@media(max-width: 576px){
.is-col-1-2 .wrapper, .is-col-1-3 .wrapper, .is-col-1-4 .wrapper, .is-col-1-5 .wrapper, .is-classic .inner-wrapper .featImage, .is-classic .inner-wrapper .featImage + .postText, .is-classic .inner-wrapper .featImage + .postText + .postMeta, .is-col-1-1 .single-item, .is-col-1-2 .single-item, .is-col-1-3 .single-item, .is-col-1-4 .single-item, .is-col-1-5 .single-item {
    width: 100% !important;
}
}

That worked like magic, thank you!

However, I only want to target the .archive pages, which are the pages with the blog posts listed.

However, the declaration already contains the .archive class, but it seems it has been applied to the home page as well. Perhaps this is because the home page also falls under the .archive pages?

Basically, I want to exclude the homepage, and all the pages on my website that don’t show the list of blogposts. Hope that makes sense!

I fixed it by replacing ‘.archive’ with ‘.category’ ??

However, I would like to add a similar behaviour to the .home page , where if the page is more than 576px wide, it should use two columns, causing the sidebar and blogposts to sit side-by-side and fill up the page.

Currently, the homepage looks correct from 1141px onwards, but I’d like it to look like this from 576px if that makes sense.

I find it difficult to see which classes to select.

Thank you!

• This reply was modified 1 year, 8 months ago by chloeponee.

To target specific pages, look at the page’s body tag classes and use a class unique to the page as one of the CSS selectors. What classes are available is theme dependent, but it looks like your theme is helping us out. The home page body tag has the class “home”. So you can do something like:

.home .is-col-1-5 .single-item {
    width: 48% !important;
}

Just an example, this is not intended to be a copy/paste solution.

Thank you. I’m still struggling to target the correct classes and getting the layout I want, now that I’ve added so much custom CSS.

From 576px onwards, I want the layout on the homepage (https://test01.mug-cakes.nl/) to be two columns (sidebar + posts) instead of one column.

However, currently it shows one column on screen sizes up to 760px , instead of the 576px I want. Hmmm…

• This reply was modified 1 year, 8 months ago by chloeponee.

You have a number of media queries related to .is-column and .main-column where the break point is max-width: 760px or max-width: 768px. You can override these with equivalent 576px breakpoints to set widths to 100%. But you also need to address the 576px to 768px span where your theme is still trying to apply 100% widths, this span will also need overrides setting widths to 60% and 40% as applicable. You could setup a media query along the lines of

@media only screen 
and (min-device-width : 577px) 
and (max-device-width : 768px)

to cover this span of widths.

I made it work, thank you for your explanation!! ??