C'est la première fois que j'utilise les media queries dans React et j'aimerais afficher tous mes éléments dans une colonne au lieu de 2 si max-width:600px

Mon 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;
 }
}

Je pense que mon style ne change pas depuis que j'ai défini des colonnes de modèle de grille dans mon élément mais je n'en suis pas sûr.

0
vasilis 123 2 nov. 2020 à 13:05

1 réponse

Meilleure réponse
<ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>

Essayez également de déplacer style vers app.css. Je pense que le CSS en ligne a une priorité plus élevée.

1
Jerry 2 nov. 2020 à 10:29