Gatbsy: CSS media query works in development but not production

Stephen Gladney 0
Viewed 16

I'm working with Gatsby and using a media query to hide/show different elements in my header, based on the screen size (desktop vs mobile navigation).

Here's the image tag:

<StaticImage
            height={50}
            className="ccslogo-mobile"
            placeholder="none"
            src="../images/CCS-logo-lime.png"
            width={50}
/>

Here's the CSS:

@media screen and (min-width: 1191px) {
  .ccslogo-mobile {
    display: none;
  }

The element is successfully hidden on desktop in development but when I deploy to production the element shows up, even on desktop. It also appears that my font size is being rendered for mobile size when viewing on desktop (again production only).

media-queries gatsby css
1 Answers

I was able to resolve this by wrapping the images in divs and applying the classes to the divs.

Stephen Gladney0
Related