Why is my React stylesheet media query not working?

Question

I am connecting an external stylesheet to my React component, and I have a media query and I intend the logo to have a height of 100vh when the screen width is less than 300px. However this media query is ignored and only the original styles apply. I tried adding the css directly in the HTML file using the style tag. Here is the relevant code:

Logo.js

import React from "react";
import "./Logo.css";

export default class Logo extends React.Component {
  render() {
    return (
      <img 
        alt=""
        className="Logo"
        src="../logo.png"
      />
    );
  };  
};

Logo.css

.Logo {
  position: absolute;
  left: 42vw;
  bottom: calc(50vh + 4vw);
  height: 16vw;
};

@media screen and (max-width: 300px) {
  .Logo {
    height: 100vh;
  };
};

@AdamAzad Inspect element and then used toggle device toolbar. Simulated using samsung galaxy fold. — Kotetsu Chan
– Kotetsu Chan, Commented Oct 31, 2020 at 14:38
@KotetsuChan galaxy fold's screen width might be larger than 300px. Did you try with a different value? — Ozgur Sar
– Ozgur Sar, Commented Oct 31, 2020 at 14:51
@ozgur On chrome it said the simulated width is 280px, which is less than 300. — Kotetsu Chan
– Kotetsu Chan, Commented Oct 31, 2020 at 14:59
@KotetsuChan check this please stackoverflow.com/questions/54491645/… — Ozgur Sar
– Ozgur Sar, Commented Oct 31, 2020 at 15:03

Kotetsu Chan · Accepted Answer · 2020-10-31 18:14:10Z

2

Using hooks in react:

import React from "react";
import { useMediaQuery } from "react-responsive";

export default function Logo() {
  const isDesktop = useMediaQuery({
    query: '(min-aspect-ratio: 1/1)'
  });
  let logo = {};

  if (isDesktop) {
    logo = {
      position: "absolute",
      left: "42vw",
      bottom: "calc(50vh + 4vw)",
      height: "16vw"
    };
  } else {
    logo = {
      position: "absolute",
      left: "38vw",
      bottom: "calc(50vh + 6vw)",
      height: "24vw",
    };
  };

  return (
    <img 
      alt=""
      style={logo}
      src="../logo.png"
    />
  );
};

Remember to download useMediaQuery by typing npm install react-responsive --save into the command line.

answered Oct 31, 2020 at 18:14

Kotetsu Chan

957 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yanina Hernández Vega Over a year ago

is this the correct way to do it? why the style sheet doen't work? please if you can answer those question to me

Ozgur Sar · Accepted Answer · 2020-10-31 15:11:36Z

0

Please try adding this to the head section of your code.

<meta name="viewport" content="width=device-width,initial-scale=1">

answered Oct 31, 2020 at 15:11

Ozgur Sar

2,2422 gold badges15 silver badges24 bronze badges

1 Comment

Ozgur Sar Over a year ago

Is your browser zoom-ed at different than 100% level ? If so, can you zoom to 100% (Ctrl+MouseWheel) and try again?

Collectives™ on Stack Overflow

Why is my React stylesheet media query not working?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related