We Keep Coding

Font size increase delay issue

I am using this loading screen animation I found on Codepen. On mobile devices I found the screen sizes to be really small. I am using media queries to increase the size like this
#media (min-width: 576px) {
.counter p, counter h1{
font-size:200%
}
}
The font size only increases after the loading animation reaches 100%. I cannot figure out why

Try this.
#media (max-width: 576px) {
.counter p, .counter h1{
font-size:2em;
}
}

CSS media query for exact viewport width

Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?

Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.

You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}

You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}

using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)

#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}

dynamically sizing an image

I have an image that I'm sizing with a percentage of it's container, what I would like to do is to lower that percentage when the container is bigger (window is maxed) and a higher number when the window is shrunk.
Rather then write a script using some type of switch or multiple if statements I was wondering if anyone had any ideas on a possible math formula solution kind of thing.
For example a width 1080px would have a result of 1% and
a width of 358px would have 5%

You should be able to use media queries for this with varying width sizes. There is really no magic mathematical formula for this.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Use the following media query to achieve this:
#media only screen and (max-width: xxxpx) and (min-width: yyypx){
#container img{
width: z%;
}
}
Example:
#media only screen and (max-width: 400px) {
#container img{
width: 5%;
}
}
#media only screen and (max-width: 1000px) and (min-width:401px){
#container img{
width: 3%;
}
}
#media only screen and (min-width:1001px){
#container img{
width: 1%;
}
}
Replace the pixel values with the desired values and set multiple range as required
For more on media query read this:
http://css-tricks.com/css-media-queries/

CSS and Javascript Media Query Detection

From http://www.w3.org/TR/css3-mediaqueries/ we can see that there are many ways to declare media queries, eg:
(1) #media screen and (min-width: 400px) and (max-width: 700px) { … }
(2) #media handheld and (min-width: 20em),
screen and (min-width: 20em) { … }
(3) #media screen and (device-aspect-ratio: 16/9) { … }
(4) #media screen and (device-width: 800px) { … }
And so on.
I would like to know if there is any way in javascript or in the browser that we can find which width ranges certain media queries apply to.
Eg (1) would be between 400 and 700 and (4) would be exactly 800
It seems like it would be tedious to parse the media query strings to determine this information. Is there an easier way?

Try this mediaquery bookmarklet: http://fhemberger.github.com/mediaquery-bookmarklet/

How to make image disappear with a smaller page size?

I am working on a design for a website and when you decrease the size of the page I want a specific image in the footer to disappear.
Is this even possible?

It's not only possible, but fairly simple with media queries:
#media screen and (max-width: 600px) {
.myImageClass {display:none;}
}

Yes, it is easily doable. I suggest you use CSS media queries to get the job done.
/* Normal CSS rules (always applies) */
#footer { display: none; }
/* Media query rules to override previous rules, as necessary */
#media screen and (min-width: 800px) {
#footer { display: block; }
}

This can be done either with CSS Media Queries or using Javascript. SmashingMagazine has a good article that can help you get started: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/