Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted October 7, 2016 7:48am by

desktop media query making mobile media query styles disappear

I have all my mobile styles sitting in a media query set to @media (max-width: 400px) {}. Then I have all my desktop styling sitting in a media query set to @media (min-width: 400px) {}. When I use display:none to cover up some of the mobile styles that I dont want to showing up on desktop they disappear from the mobile view as well. Any one have any idea why?

2 Answers

October 7, 2016 8:02am

could you try link your code?

October 7, 2016 8:06am

So there are two media queries. The top is for desktop and the bottom is for mobile. Now if I do a display:none in the desktop media query to remove mobile styling I dont want showing it removes it from the mobile view as well.

@media (min-width: 400px) {

header {
  background: #107E43;
  max-width: 100%;
  height: 6%;

}

body {
  margin:auto;
}

.title {
  margin-top: -72px;
  display: block;


}

.fa-cube {
  color:#ffffff;
  margin-left:13%;
  margin-top: 1%;
}

.plattBox {
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
 }


.navSearchBar {
  background-color: #0F703C;
  height: 100%;
  width: 30%;
  margin-left:55%;
}

.navSearchBarText {
  color: #ffffff;
  opacity: .5;
  margin-bottom: 10%;
  float: right;
  margin-right: 63%;
  margin-top: 5%;
  max-width: 50%;
  }


.magnifyGlass {
  color: #ffffff;
  margin-top: -15%;
  margin-left: 90%;

}

/* Upload Icons Styling*/

.uploadIconsDiv {
  position: relative;
  color: #307651;
  margin-left: 80.4%;
  margin-top: 3%;
}

/* File list Name Size Header Styling*/

.nameSizeParent{
  font-family: 'Raleway', sans-serif;
  font-size: 70%;
  margin-top: 10%;
  margin-left: 53%;
  float: left;
}

/*Headshot Picture and Side Menu Styling*/

.headShot {
  float: left;
  margin-right: 32%;
  margin-top: -11%;
  margin-left: 11%;
}

.sideMenu {
  float: left;
  margin-left: 9.9%;
  margin-top: -4%;
}

.sideMenuList {
  list-style: none;
}

.listClass {
  margin-bottom: 15px;
}

li .fa {
  padding-right: 17px;
}

/*****************************/


/* Uploaded Files Drop Down Menu Styling*/

.container {
  font-family: 'Raleway', sans-serif;
  font-size: 70%;
  width: 1%;
  margin-top: -1%;
  margin-right: 18%;
  float: right;
}

.action {
  line-height: 20px;
  width: 20px;
  position: relative;
}

#text {
  background: #ffffff;
  cursor: pointer;
  border:0;
  font-weight: bold;

}

#text:focus ~ .menu {
  opacity: 1;
}

.menu {
  position: absolute;
  top: -40px;
  left: -140px;
  width: 100px;
  list-style-type: none;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: white;
  opacity: 0;
}

/*****************************/



/*Styling for the jQuery-upload-file*/

b {
  display: none;
}

.ajax-file-upload-error {
  display: none;
}

.ajax-file-upload-filesize {
  width: 50px;
  height: auto;
  margin: 0 5px 5px 0px;
  display: inline-block;
  vertical-align:middle;
}

.ajax-file-upload-filename {
  font-family: 'Raleway', sans-serif;
  color: #000000;
  border-bottom: 2px solid #D3D3D3;
  padding-bottom: 3px;
}

#fileuploader {
  margin-left: 80%;

}

.ajax-file-upload-container{
  margin-left: 40%;
  margin-top: 13%;


}

.ajax-file-upload {
    font-size: 10px;
  font-weight: bold;
    cursor:pointer;
    line-height:20px;
    height:10px;
  display: inline-block;
  border: .5px solid #000000;
  padding: 2px 4px 4px 2px;
}


}



/******************************/










/******************************/


  /*Mobile iphone 6*/

  @media (max-width: 400px) {



    header {
      background: #107E43;
      max-width: 100%;
      height: 8%;


    }

    body {
      margin:auto;
    }

    .title {
      margin-top: -69px;
      display: block;
      margin-right: 65%;


    }

    .fa-cube {
      color:#ffffff;
      margin-left:13%;
      margin-top: 1%;
    }

    .plattBox {
      font-family: 'Raleway', sans-serif;
      color: #ffffff;
     }


    div.navSearchBar {
    background-color: #107E43;
    height: 100%;
    width: 30%;
    margin-left: 55%;

    }

    .navSearchBarText {
      display: none;
      }


    .magnifyGlass {
      color: #ffffff;
      margin-top: 16%;
      margin-left: 87%;
      font-size: 22px;
    }


    .uploadIconsDiv {
      display:none;
    }

    .headShot {
      display: none;
    }

    #fileuploader {
      display: none;
    }

    .sideMenu {
      display:none;
    }


    /*Hamburger Menu Styling*/

    .mobile {
        display: block;
        background-color: #ffffff;
        }

        .mobile a {
        background-color: #ffffff;
        font-family: 'Raleway', sans-serif;
        color: #000000;
        display: block;
        text-decoration: none;
        font-size: 1.1em;
        padding: 20px 5px 20px;
        margin-left: 12%;
        border-bottom: 1px solid #D3D3D3;
        background-color: #ffffff;
      }


        button.toggle {
        position: absolute;
        top: 15px;
        right: 15px;
        border: 0;
        text-indent: 200%;
        /*overflow: hidden;*/
        background: url(/hamburger.png) center no-repeat;
        background-size: 80%;
        width: 30px;
        height: 30px;
        outline: none;
        transition: all 400ms ease;
        }

        #nike {
          margin-left: 7%;
          margin-bottom: -3%;
        }

       .fa-1 {
         padding-right: 27px;

       }

/********************************/

.nameSizeParent {
  font-family: 'Raleway', sans-serif;
  font-size: 70%;
  margin-top: 181%;
  margin-left: 17%;
  float: left
}

.fileName {
  float:left;
}

.fileSize {
  float:right;
  padding-left: 17px;

}

.mobile-logo {
background-color: #3D3B3E;
max-width: 100%;
height: 17%;
}

#mobile-logo-img {
  margin-left: 33%;
  margin-top: 3%;
  float: left;

}

.container {
  font-family: 'Raleway', sans-serif;
  font-size: 100%;
  max-width: 1%;
  margin-top: 30%;
  margin-right: -91%;
  float: right;
}

.action {
  line-height: 85px;
  width: 20px;
  }


.bell {
  float: left;
  margin-top: -72%;
  margin-left: -169%;
}

#boxHillsboro {
  font-size: 15;
  float: right;
  margin-top: -239%;
  margin-right: 240px;
}

.box {
  color: #D3D3D3;
}



hr {
  margin-left: -356px;
  margin-right: -21px;
  border: .1px solid #D3D3D3;
}

.mobile-search-bar {
  float: right;
  margin-right: 170%;
  margin-top: 36%;

}

.nameSizeParent:hover {
  color: #107E43;
  text-decoration: underline;
}


/* Uploaded Files Drop Down Menu Styling*/

.container {
  font-family: 'Raleway', sans-serif;
  font-size: 100%;
  max-width: 1%;
  margin-top: 30%;
  margin-right: -91%;
  float: right;

}

.action {
  line-height: 85px;
  width: 20px;
  position: relative;
}

#text {
  background: #ffffff;
  cursor: pointer;
  border:0;

}

#text:focus ~ .menu {
  opacity: 1;
}

.menu {
  position: absolute;
  top: -40px;
  left: -140px;
  width: 100px;
  list-style-type: none;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: white;
  opacity: 0;
  font-size: 90%;
  line-height: 122%

}

}

October 7, 2016 9:58am

Not sure but I have a feeling that it might be because the @media is overlapping each other at 400px.

If I may give a suggestion: If you are doing the mobile-first approach I would make the css for mobile first (no media query) and then add media queries when you've finished the "stanard" styling:

/*****
write your standard css in here
*****/

/****
here you start adding media queries for new screen sizes
****/

This is just a suggestion cause I've never seen it done like in your example before :-)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Amandeep Dindral

Amandeep Dindral

desktop media query making mobile media query styles disappear

2 Answers

Henrik Christensen

Henrik Christensen

Amandeep Dindral

Amandeep Dindral

Henrik Christensen

Henrik Christensen