Additional custom breakpoints/media queries

[jamescrabb]

The ability to add your own custom breakpoints to the additional 4 that are in Oxygen currently.

This feature would add the breakpoints into the Oxygen UI which would simply extend the functionality that already exists.

This will increase users ability to make responsive designs in a quicker and simpler way without adding breakpoints to a custom stylesheet

[KittenCodes]

129

[sassythewookie]

Oxygen 3.2 alpha 1 introduces the ability to modify the default break points in Oxygen, it would be great to see the ability to add custom break points as well.

[jamescrabb]

129

This has now been added (ability to adjust current breakpoints)

This is specifically for adding custom breakpoints

[jointlymedia]

I agree with this request

[SlmnAntnll]

Yes, please.

[ytwite]

I agree with this request too

[kalaio]

+1

[kalaio]

129

This has now been added (ability to adjust current breakpoints)

This is specifically for adding custom breakpoints

For what I understand, the feature requested is to add additional breakpoints. Currently oxygen allows 4, we should be able to add more (not sure how many more).

[hiBrianLee]

There's somewhat of a workaround for the time being. Suppose you had a my-test-class class with the flex-direction set to row, and you want to change the flex-direction to be column instead for smaller devices.

The easy way to do this is to use !important and just use the class name directly with media queries, and add something like below in the global stylesheet.

@media (max-width: 375px) {
  .my-test-class {
    flex-direction: column !important;
  }
}

If you'd rather not use !important, inspect the element using Chrome dev tools and use the Computed Style Pane to find out which specific selector is being used for the flex-direction value (or whatever value you want to change). It would be something like .my-test-class:not(.ct-section) (your case might be different). If you hover over it, a little arrow will appear, which you can click on to see which exact selector is being used.

After you find that out, add the appropriate media query that doesn't use !important

@media (max-width: 375px) {
  .my-test-class:not(.ct-section) {
    flex-direction: column;
  }
}

Your exact case may be different, but the idea is to add media queries directly into the global stylesheet using the class name you specified.

[je-fonte]

![Uploading ME.png…]()

[tD3rk]

The importance of this cannot be overstated. It's literally not possible to build high level detailed designs without being able to create breakpoints where the design dictates. I can't provide oxygen's breakpoints to someone getting paid many thousands of dollars to do a world class design and say be shackled to those, the design/content/etc. will all have to fit! This isn't how high level, custom work is done.

Please, please implement!

[stevesalot]

I am running into issues with custom images and margins when responsive, WE MUST HAVE MORE BREAKPOINTS! 4 is good for most small sites but I need to be able to make the screen look fantastic on ALL screens and would like to do it easily.

[max-got]

absolutely +1

[albertvisuals]

+1 we need to able to add custom break points!!! Please add this feature asap

[jamescrabb]

This is still kicking around 😞 I had kinda hoped it would have been addressed by now

[johncrumpton]

Would love to see this soon

[blakerr]

+1

[astacreative]

+1

[albertvisuals]

Why is this not in 4.0? Having the option to add custom breakpoints is vitally important

[aureldelic]

This really should have been implemented by now +1

[wittywolk]

I hoped this will come with 4.0 but it didn't so... +111111111111111111

[hellobubai]

I hope that it will be live in the next update.

[134710]

I want oxygen to implement breakpoint addition quickly. Divi provides this feature.

[lucianahanan]

Bump! I'm here wondering how to make a site from small to wide screen, with just 4 breakpoints.

Please, let is add more breakpoints !!

[bwp-codes]

+1 - Would love to see this implemented, too! Thank you!

[Simbaclaws]

+1

Looking to add a 1610 breakpoint, since some screens don't want to transition nicely from 1120 upwards to higher screens like that of 1920, like for example from a 1600px macbook screen to a 1920 desktop screen (which is quite a normal breakpoint nowadays). Even designing things for a 2k+ resolution would be nice, since these screens have been on the market for a long time already. Heck there are 8k screens nowadays already...

Currently I'm solving this with custom CSS stylesheets. But that is probably not the way to go if you're using a theme builder IMHO.

[netrunner7]

+1

[LDM86]

+1 It would be great if you added custom breakpoints!

[zeroamd]

+1 , like webflow! :)

[why13ee]

I recently encountered a case where I needed this feature. So...

+1

[OctaYann]

Hello, any news on that ?

Is it possible to implement it by ourselfs ?