Help with Positioning and Media Queries

Marcus,

I did not post the html/opening body/closing body in my HTML example. But, they are there!

Are you sure I'm missing a curly brace in the CSS? There are 2 opening braces and 2 closing.

@media screen and (max-width: 300px) {
    #front h1 {
        font-size: 2em;}
    }

I had the max-width set to 300 just to test the code to see if it worked. I also tried the max-width at 500px and still, no adjustment in font-size when the screen was adjusted below 500px.....

They are there now that I've taken a closer look. It's hard to see them, though, since they are on the same line as the last property. It's really hard to read CSS when it's written like that, but if that's the way you like it, so be it.

But, your code, from what you've pasted thus far, works just fine. You should post your full code for both pages so that I can see what is going on. It is likely there is an error elsewhere.

Hahaha, give me a break on the formatting! I'm still learning!

Is there a better method you would suggest for putting two objects in front of each other like I've done? Just a square in front of a rectangle that is responsive?

It doesn't matter that you have two objects in front of each other so long as they scale proportionately to the viewport. If you want responsiveness, you need to convert any large pixel values into % values and change your font sizes from px to em. "px" units are fixed units meaning that regardless of the current resolution they are displayed on, they are that exact size. % and em units are responsive units, on the other hand, scale a ton better. % units will scale proportionately to the viewport so that they will keep their dimensions proportionate to where they originally start. "em" units will scale proportionate to the current font size. You can also use % units for your fonts if you want them to be precisely the size that you originally set them to.

There are two options for converting your px units into % units: option 1 is the long, hard way that you should just know how to do (just in case) and option 2 is the short, easy way. Which one do you prefer, Ryan?

As I said, em units scale proportionate to the current font size. Most of the time, 1 em = 16px. But, depending on accessibility options that are in place from the user, platform, browser, and screen resolution, this default pixel value could be different. The "em" units however, do not scale dynamically when you resize the browser. These units are relative to the current font size of the browser. If you want them to scale dynamically, they must be % units, as well.

Now, moving on, I'm going to put Option 2 into its own answer and focus this one solely on Option 1. Option 1 is to use the following formula to calculate the % unit you'd like based upon your current screen resolution. This is actually not even the most accurate solution because you should use your page viewport width/height instead of screen resolution (which I will show you with my option 2). You can get your page viewport width/height, though, by adding the "Window Resizer" extension into Chrome.

Now, this isn't the most accurate method of converting to % because you will be off by a noticeable amount of pixels. I HIGHLY recommend using my option 2 because it is shorter, easier, and more precise.

So, in order to convert pixel units to % units, you use the following formula: "(target / context) * 100 = % unit". target is the current pixel value that the element is set to. The context is either your screen resolution width/height or document offset width/height (depending on whether you are calculating width or height). You will get the most accuracy by using offset width/height which is generally calculated via JavaScript. Here is an example:

I don't know what system you use, but most of the time, it's likely either Windows or a Mac (I use Linux, although not too many people do). I don't know how to retrieve the current screen resolution on a Mac, but on Windows 7, it's as simple as right clicking the desktop and choosing "Screen Resolution". Let's say your current resolution is 1280 x 1024. This means your width is 1280px and your height is 1024px of the entire screen. And let's say we have a box that has its width property set to 300px. To convert it, plug the respective values into the formula: (300px / 1280px) * 100" which equals "23.4375%". And you would do that for each element.

And, this is option 2. Simply copy and paste this file into an HTML file like "whatever_you_want_to_name_me.html". Run this on your local computer or on Workspaces or wherever in a MAXIMIZED window and BAM! You're done. All you do is plug in your numbers, choose whether you're dealing with width or height and click "Convert!"

You can stick with the default of 10 decimal place precision if you'd like or you can change the default loading precision by just simply changing the value located in Enter decimal precision:&nbsp; <input type="text" id="prec" value="10"> to whatever number you desire.

Just a couple considerations, though: 1) If you like to switch between computers for development, you should stick to just one until you've converted all of your present pixel units over to % because different resolutions cause different results and you'll get layout malfunctions. 2) If you switch your resolution while you are in the process of converting over your pixel values, it's gonna cause some layout malfunctions. Again, different resolutions cause different results.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Percentage Converter</title>
</head>

<body>
<h2>This converter uses your screen resolution to create a responsive unit from pixels.</h2>
<h2><strong>MAKE SURE YOUR WINDOW IS MAXIMIZED!</strong></h2>
Enter dimension to convert:&nbsp; <input type="text" id="initDim">px
<br><br>
Choose width or height:&nbsp; <select name="dim" id="dim">
<option value="Width">Width</option>
<option value="Height">Height</option>
</select>
<br><br>
Enter decimal precision:&nbsp; <input type="text" id="prec" value="10">
<br><br>
New responsive value: &nbsp;<input type="text" readonly="readonly" id="finalDim">
<br><br>
<button onclick="javascript:convertDim();">Convert!</button>
<script type="text/javascript">
function convertDim() {
var initDim = document.getElementById("initDim");
var finalDim = document.getElementById("finalDim");
var initDimVal = Number(initDim.value);
var finalDimVal = Number(finalDim.value);
var prec = document.getElementById("prec");
var precVal = Number(prec.value);
var sel = document.getElementById("dim");

if (sel.options[sel.selectedIndex].value == "Width"){
var screenWidth = document.body.offsetWidth;
finalDimVal = ((initDimVal / screenWidth) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
else{
var screenHeight = screen.availHeight;
finalDimVal = ((initDimVal / screenHeight) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
}
</script>
</body>
</html>