Selected text fades away in a 640px or less viewport

Question

I have a page that if you click one of the boxes shown in my snippet, a checkmark shows up and the content inside of shows as if it is active after you move the mouse away from it. However, when viewed with a viewport of 640px or less, the text inside of the boxes fades away after you select it and select something else. It is not doing this in a normal desktop view, so why is it doing it withing that specific media query? I did not make any changes to my .box-focused css in the media query at all, nor did I even include it because I wanted everything the same.

Does anyone see what it is that is causing this to happen?

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div> 

Answer 1

You aren't setting the colours correctly for the focused styles in the media query. See my addition of the box_focused class to the media query below.

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover, .box_focused { background-color: #45ba95; color: #FFF; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div> 

Answer 2

You have to have the same css settings copied into the media query for the same to apply. its because the scope limits what code is read

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div>