Media Queries & Font Sizes in Post CSS

[adallaserra]

Howdy. Is anyone else experiencing issues lately with the custom font size variables preset in the Wordpressify build?

Here is an example of the variables (in variables.css):

--size-hero1-mobile: 52px; --lineheight-hero1-mobile: 1.35; --size-hero1-desktop: 62px; --lineheight-hero1-desktop: 1.15;

For some reason the mixins in mixins.css only pick up the mobile sizes and do not load the media query versions as they should. Here is an example:

@define-mixin h1 { font-size: var(--size-h1-mobile); line-height: var(--lineheight-h1-mobile);

@media (--screen-lg) {
    font-size: var(--size-h1-desktop);
    line-height: var(--lineheight-h1-desktop);
}

}

Anything in @media is not registering. Is anyone else experiencing this? I've tried everything I can to solve it and the only way I got it to work was to configure it differently... but I love this setup from @luangjokaj so I'd rather use THAT!

[luangjokaj]

@adallaserra I had the same issue, and it is due to postcss-mixins not working with media queries. What I did is created 2 mixins, one for mobile and one for desktop., then applied the mixins for both mq's.

[adallaserra]

@luangjokaj my hero!

[luangjokaj]

Glad to help 😁