Do css media queries run in development mode?

[ergunpp]

Hi,
I am trying to build a Splash image component using the react-parallax plugin. I am getting the image with a static query and injecting it to parallax component. I am also using a css file for this component which consists of solely media queries for setting the height of the parallax component.

import React from 'react'
import { Parallax, Background } from 'react-parallax';
import { StaticQuery, graphql } from 'gatsby'
import "./style.css"

const insideStyles = {
  background: "white",
  padding: '20px',
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)"
};

const Splash = () =>(
    <StaticQuery
   
    query={graphql`
      query {
        images: allFile(filter:{relativePath:{eq: "main-photo.jpg"}}) {
          edges {
              node {
                extension
                relativePath
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
        }
      }
      }
      }
    `}
   
   render = {({images}) =>(
           <div>
                {/* -----basic config-----*/}
                {console.log(images.edges)}
                <Parallax
                    blur={0}
                    bgImage={images.edges[0].node.childImageSharp.fluid.src}
                    bgImageAlt="the cat"
                    strength={100}
                    className='parallax-div'
                    
                   
                    
                >
                   
                    <div  style={insideStyles}>Put some text content here - even an empty div with fixed dimensions to have a height
                    for the parallax.</div>
                   
                </Parallax>
                </div>
   
   
   )}
      
    />
    
    )
    export default Splash

And this is the code in the css file:

@media screen and (max-width: 320 px) {
    .parallax-div{
        height:167px;
    }
}

@media screen and (min-width:321px) and (max-width: 520 px) {
    .parallax-div{
        height:267px;
    }
}

@media screen and (min-width:521px) and (max-width: 1080 px) {
    .parallax-div{
        height:533px;
    }
}

@media screen and (min-width:1081px) and (max-width: 1200 px) {
    .parallax-div{
        height:800px;
    }
}

@media screen and (min-width: 1201 px) {
    .parallax-div{
        height:862px;
    }
}

The media queries seem not to run and as I have no default height setting, the background image is not displayed at all. The media queries are not running I suppose.

Appreciate advice. Thanks in advance.

[DanielRuf]

Did you add the meta tag for the viewport in your html file?

[ergunpp]

No. Where is the best place to insert it? In helmet?

[ergunpp]

Yes it is added in the react-helmet component

[jonniebigodes]

@DanielRuf per build with either in development mode or production build the viewport is defined in index.html, I don't think that the problem is that

[ergunpp]

I figured out my problem. It was because of the spaces after the pixel sizes in the media query. When I wrote 1201px instead 1201 px everything worked like a charm.
It was no issue with gatsby at all.
Sorry having bothered you all.

[DanielRuf]

wrote 1201px instead 1201 px everything worked like a charm

Ah that makes sense, oversaw this.
My first thought is often to check if the prerequisites are there like the meta tag.

[ergunpp]

@DanielRuf Thank you Daniel. I apparently needed some push to solve it.