How to make sure that the styles assigned to mobile view using media query are not inherited by by desktop view?

user_9901264 0
Viewed 43

I'm making web app using React where I fetch data from an API and display it on the page. I'm a beginner in responsive web design so I was trying media queries out. So for the mobile view i.e min-width: 320px, I wanted a div to have display:flex and I had assigned the rows and columns to its child components and everything looked fine. But when I tried viewing it in the desktop mode, it still remained a flex container. I tried explicitly calling a media query for desktop and assigned display to block, still no change. 

@media only screen and (min-width:320px){

  .form{
    grid-template-rows: auto 1fr auto;
    align-items: center;
  }

  .input{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .movie-card{
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
  }

  .movie-top{
    display: flex;
    flex-direction: row;
    word-wrap: break-word;
  }
  .movie-top-left{
    display: flex;
    flex-direction: column;
  }

  .movie-top img{
    width:150px;
    border-radius: 10px;
  }

  .card--title{
    margin-bottom: 0.5rem;
    font-size: 2rem;
  }

}

This is the media query for the mobile view, for the desktop I don't want the movie-card to be a flex container, but by inspect element shows that it is a flex container it looks different too

responsive-design css
2 Answers

You have used min width in media query this means that everything that is bigger then 320px will be assigned that css. Use max-width

user_107283580

Use the max-width operation instead of min-width. This will ensure that the devices having width lesser than 320px will have some specified stylings like you have declared, while the others will have the browser default stylings if no other CSS is specified or the other CSS if specified.

user_137229110
Related