This is my first time using media queries in react and I would like to display all my elements in one column instead of 2 if max-width:600px
My code :
import '../App.css';
<div className="results">
{loading ? (
<p>Loading</p>
) : (
//this is the style of my <ul> with 2 columns
<ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
{recipes.map((r, index) => (
<li style={{ margin: '120px' }} key={index}>
<Recipe pic={r.recipe.image} ingredients={r.recipe.ingredientLines} meal={r.recipe.label} />
</li>
))}
</ul>
)}
</div>;
App.css
@media only screen and (max-width : 600px) {
//does not work !
.recipe-list{
grid-template-columns: 1fr;
}
}
I think that my style does not change since I have set grid template columns inside my element but I am not sure .
<ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
try to move style
to app.css
as well. i think the inline css has higher priority.