Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cannot set "px " in createBreakpoints

See original GitHub issue

Description

I want to set value with px in createBreakpoints, but the value is ignored.

Link to Reproduction

https://codesandbox.io/s/blissful-water-ndgd0g?file=/src/index.js:0-347

Steps to reproduce

Set value with px in createBreakpoints
Values with px set don’t work.

Chakra UI Version

1.7.2

Browser

Google Chrome 95

Operating System

macOS
Windows
Linux

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

m4x3dcommented, Feb 23, 2022

You need to wrap the breakpoints in an object. See this example: https://codesandbox.io/s/adoring-engelbart-dspk42?file=/src/index.js

You can pass also other properties like colors, components and fonts on the same way. For more informations have a look on this page: https://chakra-ui.com/docs/theming/customize-theme

1reaction

smitgolcommented, Feb 22, 2022

can i pick up this issue ?

Top Results From Across the Web

MaterialUi custom breakpoints not applied - Stack Overflow

If I console. log my theme object, it will display the correct breakpoint values but will not apply them(the default one will be...

Building responsive components in Chakra UI - LogRocket Blog

The Chakra UI team advises we define the breakpoints as an object in a custom theme object we create: import { extendTheme }...

Breakpoint issue - Adobe Support Community - 9237590

I'm currently designing the Master page and have breakpoints at 768 and 320. I find I can reposition text and images at 768,...

Responsive Styles - Chakra UI

To define custom breakpoints, just pass them as an object into the theme. Note: Ensure the css unit of your breakpoints are the...

Where And How To Set Breakpoints In Media Queries

Breakpoints Based on 'em' Instead of 'px'. Typically when setting either a min-width or max-width media query, the measurement is 'px' based. If ......