Estoy desarrollando una aplicación de sitio base para un sitio multifunción. Entonces, en este momento estoy desarrollando solo el marco receptivo donde irá la aplicación. Quiero que la página tenga un encabezado y 3 columnas (2 columnas laterales para anuncios y una columna central para la aplicación). Quiero que las columnas laterales aparezcan solo en resoluciones superiores a 850px. Así que tengo el siguiente código:

Aplicación.js:

 <...imports, etc ...> function App() { return ( <Router> <Navbar /> <div className='divAds'> <VerticalAd /> <div className='divMiddle' > <HorizontalAd /> <div className="App" > <Switch> <Route exact path="/" component={Main} /> <Route exact path="/about" component={About} /> <Redirect to="/" /> </Switch> </div> </div> <VerticalAd /> </div> </Router> ) }

y en el componente VerticalAd tengo:

 import React from 'react' import VerticalSun from '../../img/sun-vert.jpg'; import { Image } from 'semantic-ui-react' import './verticalAd.scss' export const VerticalAd = () => ( <div className='divVad'> <Image src={VerticalSun} rounded alt="Vertical Ad" /> <Image src={VerticalSun} rounded alt="Vertical Ad" /> <Image src={VerticalSun} rounded alt="Vertical Ad" /> </div>

que creó esta estructura de página:

Entonces quiero que las columnas laterales desaparezcan en las pantallas móviles, así que tuve el siguiente css para VerticalAd.scss:

 .divVad { @media (min-width: 850px) { display: block; } @media (max-width: 849px) { display: none; } img { width: 10em; height: 50em; } }

Pero las columnas verticales no desaparecerán en resoluciones más bajas. Qué estoy haciendo mal ?

Intenté mover las consultas @media a App.scss pero tampoco funcionó.

Estoy probando esto usando la prueba de respuesta de las herramientas para desarrolladores de Chrome.

Editar

El problema eran las herramientas de desarrollo. ASAI lo probó dimensionando toda la ventana del navegador que funcionó. Lo siento. Pero de todos modos ... la respuesta de @Samathingamajig fue útil y la acepté. Disculpe cualquier inconveniente.