Html and CSS site changes between platforms - html

Question

Hello I have made a website where people can get information on various topics. I spent all day yesterday adding in Rectangles to the background to make the site look slightly nicer. Last night I looked at the site on my phone and saw that the rectangles were not lined up correctly like they should be and the way they are on PC. I dont have enough reputation to post Images so I'll describe the problem.
On pc a rectangle is drawn behind one block of text and a rectangle is drawn behind an image. On the phone the image has the rectangle behind it but the text only has part of the rectangle behind it. Its as if they wont line up or the text is being re-formatted or something. The site name is omicrome.com if you want yo see for yourself. Here's the code that takes care of the part of the site with the problem.
<div class = "container_24">
<header>
<div id = "rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id = "rect0"></div>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div id = "rectIndexContact"></div>
<div id = "contactblock">
<h6>Contact</h6>
<center>Email</center>
<center>Twitter</center>
</div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p><p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
Here is the CSS:
#rect1{
position: absolute;
margin-top: 10px;
margin-left: -6px;
width: 750px;
height: 208px;
background: #ffffff;
z-index: -1;
}
#rect2{
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6{
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner{
background: url(../img/rectoday.jpg) no-repeat;
width:695px;
height:250px;
margin-top: 10px;
clear:both;
}
.callout{
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width : 250px;
height:250px;
margin: -250px 710px 22px;
float: left;
}
header{
overflow: hidden;
}
header h1{
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width : 220px;
height:60px;
margin: -10px 5px 22px;
float: left;
}
nav{
float: right;
padding-top:10px;
margin-right: 09px;
}
nav li{
display: inline;
}
li{
margin-left: 24px;
}
nav a{
text-transform: lowercase;
}
.grid_4{
}
.grid_3{
margin-left: 60px;
}
a{
color:#7e7e7e;
text-decoration: none;
}
a:hover, .selected{
color: black;
}
a:.selected{
color:black;
}
p{
font-size: 13px;
line-height: 20px;
color: #353535;
}
The rectangles are just with the id "rect1" or "rect0". Here is a link to the screenshots: https://drive.google.com/open?id=0B5JL3GH0xtHPMzVESWhSb1JDa0k and https://drive.google.com/file/d/0B5JL3GH0xtHPdUZSZm1ZMlFYWGs/view?usp=sharing How can I make the rectangles match up with the text and images the same way on pc's and phone's? Thanks -Jack.

Answer 1

UPDATE:
Created another example for clarification: jsfiddle updated.
There are two cases in the example below, the first one uses a wrapper like I am recommending, and the second one uses a rectangle using position absolute and fixed height like you are using. Check it out in different viewports and see what happens.
HTML:
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
</div>
<div class="rect1"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
CSS:
.wrapper {
background-color: #7DF481;
padding: 10px 20px;
}
.rect1 {
position: absolute;
top: 140px;
background-color: #ff0000;
height: 90px;
width:100%;
z-index: -1;
}
EDIT:
You should read more about responsive design, you could use a framework like Bootstrap. There's also media features that limit the stylesheet's scope, you can read more about that here: Using Media Queries.
The problem is that you are relying on a fixed height for your rectangles. The text will try to fit in the viewport of your device, making your container have a higher height. I recommend you using a wrapper instead of fixed rectangles. Here's an example: jsfiddle
HTML:
<div class="container_24">
<header>
<div id="rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id="rect0"></div>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1">
<div id="rectIndexContact"></div>
<div id="contactblock">
<h6>Contact</h6>
<a href="mailto:crew#omicrome.com" class="button" id="contactEMAIL">
<center>Email</center>
</a>
<a href="https://twitter.com/Error404inSpace" class="button" id="contactTwitter">
<center>Twitter</center>
</a>
</div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p>
<p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
</div>
CSS:
#rect1 {
background-color: #ffffff;
padding: 10px 20px;
}
#rect2 {
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6 {
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner {
background: url(../img/rectoday.jpg) no-repeat;
width: 695px;
height: 250px;
margin-top: 10px;
clear: both;
}
.callout {
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width: 250px;
height: 250px;
margin: -250px 710px 22px;
float: left;
}
header {
overflow: hidden;
}
header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width: 220px;
height: 60px;
margin: -10px 5px 22px;
float: left;
}
nav {
float: right;
padding-top: 10px;
margin-right: 09px;
}
nav li {
display: inline;
}
li {
margin-left: 24px;
}
nav a {
text-transform: lowercase;
}
.grid_4 {}
.grid_3 {
margin-left: 60px;
}
a {
color: #7e7e7e;
text-decoration: none;
}
a:hover,
.selected {
color: black;
}
a:.selected {
color: black;
}
p {
font-size: 13px;
line-height: 20px;
color: #353535;
}