React Js project won't resize when toggling device toolbar

Question

As the title says the project is not resizing when toggling device toolbar on google chrome, this is particularly annoying as I'm trying to run some media css styling.

Does anyone know what could be the cause of this?

I'm using this starter kit: https://github.com/coryhouse/react-slingshot

With added: https://github.com/styled-components/styled-components for styling.

I'm basically trying to have dynamic components by adding media queries. But it seems like I can't test these media queries without having the window get resized. As you can see in the image below, the size is set to 320x568 but the app is returning 980x1739.

Thanks!

Answer 1

Set a viewport in your html file, something like <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport" />