Title: Changing breakpoints
Last modified: March 5, 2023

---

# Changing breakpoints

 *  Resolved [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * (@chloeponee)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/)
 * Hi,
 * I want to change the responsiveness of the blog posts of this page.
 * Currently, the blogposts on this page appear in one column up until a screen 
   size of 1140px. From 1141px there will be two columns.
 * However, I’d like to change this breakpoint to 576px for this particular page,
   so that only mobile screens show one column.
 * How can I fix this? And let me know if there is anything else in my code that
   I could clean up regarding layout. I’m still a beginner, especially when it comes
   to layout!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fchanging-breakpoints%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Muhammad Jawad Abbasi](https://wordpress.org/support/users/jawad1234/)
 * (@jawad1234)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16529586)
 * Please implement that code in Additional CSS
 *     ```wp-block-code
       @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;
       }
       }
       ```
   
 *  Thread Starter [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * (@chloeponee)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16529686)
 * 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!
 *  Thread Starter [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * (@chloeponee)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16529777)
 * 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 3 years, 3 months ago by [chloeponee](https://wordpress.org/support/users/chloeponee/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16529872)
 * 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.
 *  Thread Starter [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * (@chloeponee)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16534121)
 * 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 ([http://test01.mug-cakes.nl/](http://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 3 years, 3 months ago by [chloeponee](https://wordpress.org/support/users/chloeponee/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16536921)
 * 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.
 *  Thread Starter [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * (@chloeponee)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16544964)
 * I made it work, thank you for your explanation!! 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Changing breakpoints’ is closed to new replies.

## Tags

 * [breakpoints](https://wordpress.org/support/topic-tag/breakpoints/)
 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 8 replies
 * 3 participants
 * Last reply from: [chloeponee](https://wordpress.org/support/users/chloeponee/)
 * Last activity: [3 years, 3 months ago](https://wordpress.org/support/topic/changing-breakpoints/#post-16544964)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics