Question posted in 
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>
2
Answers
You aren’t setting the colours correctly for the focused styles in the media query. See my addition of the
box_focusedclass to the media query below.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