media query not working int the below code - Recact js - reactjs

Question

In the below code the media query not working. Please help if any mistake I did.
I used paragraph media query the below. When I checked in mobile mode t is not working.
/* eslint-disable react/jsx-no-target-blank /
/ eslint-disable react/no-unescaped-entities */
import React from 'react'
import { DropdownButton, Dropdown } from 'react-bootstrap'
const ProfileInfo = () => {
const paragraph = {
position: 'absolute',
top: '66px',
right: '108px',
'#media screen and (min-width: 610px)': {
position: 'static'
}
}
return (
<div className="container-fluid">
<div className="row clearfix">
<div className="col-md-6 col-sm-12"> </div>
<div className="col-md-6 col-sm-12"> </div>
</div>
<div className="row" style={{ margin: 'auto', width: '50%' }}>
<div className="alert alert-success col-md-12 col-sm-12">
<h5 className="alert-heading">Aktive meldinger</h5>
<p>
Hahahahahhhhhfgdfgf gdfgdfgffgdfggfhgh fgdfgdfgfgfg
</p>
</div>
</div>
<div className="row clearfix">
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }}><strong>Profile: </strong> </h5>
<p className="card-text"><strong>Navn: </strong> Bengt Nilsfors</p>
<p className="card-text"><strong>Kontaktinformasjon: </strong> 95833897, nilsfors#gmail.com</p>
<DropdownButton id="dropdown-basic-button" variant="outline-primary"
title="Address">
<Dropdown.Item href="#/action-1">Address1 </Dropdown.Item>
<Dropdown.Item href="#/action-2">Address2</Dropdown.Item>
<Dropdown.Item href="#/action-3">Address3</Dropdown.Item>
</DropdownButton>
<p className="card-text"><strong>Adresse: </strong> Nøkken 7 H0101, 9016 Tromsø</p>
<p className="card-text"><strong>Passord: </strong> ***********</p>
<button className="btn btn-success">Rediger</button>
</div>
</div>
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }} ><strong>Nettverksanalyse</strong></h5>
<img className="card-img" variant="top" src="../images/testimg.png" style={{ width: '152px' }} />
<div style= { paragraph }>17:58:55: Henter nettverskinfo...<br/>
18:00:31: Nettverkstatus ok. Ingen feil funnet.</div>
<button className="btn btn-warning mt-2 text-center">See details</button>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Abonnement</h5>
<p className="card-text"><strong>Internett</strong></p>
<p className="card-text">Giga (1000/1000) Kr 699,- per mnd.</p>
Oppgrader
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Faktura</h5>
<ul className="list-group" style= {{ float: 'left' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Mars 2021</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link"href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Februar 2021</a></li>
</ul><ul className="list-group" style={{ float: 'right' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}> November 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Oktober 2020</a></li>
</ul>
<div style={{ marginTop: '76px' }}> Se alle</div>
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Kontakt oss</h5>
<p className="card-text">Kontakt oss via chat eller telefon [phone].</p>
Chat
</div>
</div>
</div>
</div>
</div>
)
}
export default ProfileInfo

Answer 1

t's not the problem with react its with the CSS code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the #media queries to the end of the CSS page. i.e
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}