When the screen extends a max with of 600px , the background of the whole page is supposed to be red:
@media only screen and (max-width:600px){
body{
background:red;
}
}
when I reduce the page below a max-width of 600px, the background is now supposed to be red. What is my issue?
Hint: You have a background image set on both the body and the .container. What do you want to happen to that image when the width is below 600px?
so should I remove the background image from either the body or the .container?
Maybe, give that a try and see what happens.
Please note I don’t just want to give a solution because it will help you to learn if you think through and try some things on your own, which will make things stick around in your memory longer than if you’re just given a solution to an issue. I’ll be here to help though if you are still stuck after trying a few things. Just let me know what you tried and what the issue is after.
I followed my hunch , removed the background image from the body and allowed the background image setting to remain in the .container, and that worked for me.
It’s possible that you may just need to modify your style for the .container in your media query. It depends on what you really want to happen. Try to play with both a bit and see what happens.
Also, be careful because you have the same media query defined twice in your CSS, once near the top and once near the bottom.
Great! I’m glad you got it sorted.
Now I am working on the javascript portion of my code. I almost have my code completed, but the problem is when the counter goes below zero using the lower button,it skips every two values rather than just one value(ie 0,-2,-4,-6,etc.) when the value is less than zero; whereas when the counter is above zero, it acts the way I intended for the counter to act because it increments the counter by one and it turns green when counter is greater than zero. What can I do to fix this? Here is a link to my updated javascript code added:https://codepen.io/noblegas/pen/bGdavKj
Never mind. Fixed that. it turns out needed one if /else statement for each event listener.
lowBtn.forEach((btn)=>{
btn.addEventListener(‘click’,function(e){
e.preventDefault();
if(counter<=0){
h1.innerHTML=counter;
h1.style.color='red';
counter=counter-1;
} else{
h1.innerHTML=counter;
h1.style.color='green';
counter=counter-1;
}
})
});
highBtn.forEach((btn)=>{
btn.addEventListener(‘click’,function(e){
e.preventDefault();
if(counter<0){
h1.innerHTML=counter;
h1.style.color='red';
counter=counter+1;
}else{
h1.innerHTML=counter;
h1.style.color='green';
counter=counter+1;
}
})
})
I am proud of my project. I largely fixed my issues myself without much help. I don’t care how simple this project is for some of you. I didn’t initially finish it immediately and what matters is I made some progress largely on my own.