desktop media query affects the mobile view

Question

I have a problem where I created the first mobile view and then want to add the desktop, iPad, etc... But when I do add a media query for the "desktop view (like I want to believe)" it affects the look for mobile view. What can I do to make the breakpoint for the desktop view, but so it won't affect the mobile, screen width, and iPad. *Link for the full code: https://codepen.io/schoolcoder/pen/WNEgboE

.split {
    display: flex;
    @media screen only and (min-width:50em) {
    }
}

I added a screenshot as well; the end result I want and what I get when I add the code. If anyone has any advice, I have tried a million combinations still isn't working... Would be much appreciated!

Answer 1

The media query needs to encapsulate the rules that it applies to, not the other way around.

@media screen only and (min-width: 50em) {
    .split {
        display: flex;
    }
}

Answer 2

Hello and welcome to Stack Overflow!

You can set desktop screen styles normally with CSS and then add media queries for mobile view.

For example, this would be your CSS for your desktop view.

.split {
   display: flex;
}

This would be your CSS for mobile views.

/* I recommend using pixels instead of em */
/* This would be your view on any screen smaller than 850px i.e., most mobile devices */

@media only screen and (max-width: 850px) {
   .split {
     display: flex;
  }
}

/* you can also add multiple/different class styles under one media query. ex. */

@media only screen and (max-width: 850px) {
   .split {
     display: flex;
  }
   
   .classname {
     font-size: larger;
  }
} /* <-- just be sure to close your media query */

So to recap, I would first make your page based on the desktop view and once you are comfortable with that feeling you can start resizing your browser and implement media queries to have your content adjust accordingly.