Hi,

I’m currently working local but I’ll try my best to explain with screenshots and if need be I’ll try pushing to the staging server.

I have 4 SCSS partial files;
1 – Global
2 – Layout
3 – Page Specific
4 – Forms.

In my global partial file, I have the following – https://d.pr/i/W3AU0d

The color variables work perfectly in all partial files with no extra work, however, the breakpoints do not.

In the layout partial file I’m trying to change the font size at the tablet breakpoint. You can see here – https://d.pr/i/dBqeWw.

With the max-width set to 992px it works fine. With the max-width set to $tablet, nothing happens.

Any ideas?

Thanks.

2 responses to “Variables not working for Breakpoints”

  1. devusrmk says:

    Hello I learned recently that css variables are not working in media query declarations.

    Replace:
    $desktop: var(—);
    $tablet: var(—);
    $mobile-l: var(—);
    $mobile: var(—);

    with real numbers like:
    $desktop: 1600px;
    $tablet: 1200px;
    $mobile-l: 800px;
    $mobile: 400px;

    In this article you can read in more details why it’s not working:

    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

  2. thrive says:

    Thanks for the help!

Leave a Reply

Your email address will not be published.