I am experimenting with zurb foundations responsive design framework with my own custom media queries. My site exists here with username:anders password:reading61 Now my issue here is when I resize the site between 1200px and 768px the div with the text skills moves up and down and it doesn’t have a consistent distance between the previous div, what I would like is it to have about 20 px or so distance the whole time, I have tried doing absolute position howerver that breaks the width because the columns are different than the previous div, because it is based on zurbs css. Hopefully this isnt to confusing.
Here is my css
/* Artfully masterminded by ZURB */
/* --------------------------------------------------
Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/
/* -----------------------------------------
Shared Styles
----------------------------------------- */
body{
background-color: #ffffff;
}
.rounded{
-moz-border-radius: 15px;
-webkit-border-radius: 10px;
-khtml-border-radius: 20px;
border-radius: 10px;
list-style-type: none;
float:left;
padding: 5px;
margin-right: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#f0eeed), to(#b9b5af));
background: -moz-linear-gradient(top, #f0eeed, #b9b5af);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0eeed', endColorstr='#b9b5af');
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.rounded a{
color: #000000;
font-weight: bold;
}
/* -----------------------------------------
home.php
----------------------------------------- */
#logoNav div{
float: left;
}
.logo{margin-right: 10px; margin-top: 10px; }
.logoLarge{margin-top: 20px;}
.mainContent{
padding-top: 20px;
}
.plus {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
list-style-type: none;
float:left;
padding: 11px;
margin-right: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#f0eeed), to(#b9b5af));
background: -moz-linear-gradient(top, #f0eeed, #b9b5af);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0eeed', endColorstr='#b9b5af');
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.more{
padding-top: 10px;
display:block;
}
#profilePic img{
border: solid 5px #765745;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 30px;
}
.mainContent p{font-size: 24px;}
.mainMore{
margin-top:-150px;
}
/* -----------------------------------------
Page Name 1
----------------------------------------- */
/* Smartphones (portrait and landscape) */
@media only screen
and (min-width : 0px)
and (max-width : 767px) {
#header{margin-top: 10px;}
#profilePic{display: none;}
.logoLarge{display:none;}
.mainContent p{font-size: 14px;}
.mainContent {margin-top: -22px;}
.mainMore{display:none;}
}
@media only screen
and (max-width: 1200px)
and (min-width: 768px) {
.main{font-size:28px; margin-top: 110px; margin-left: 10px;}
#mainNav{margin-left: 20px;}
.logo{display:none;}
.noMore{display:none;}
.mainMore{
position: absolute;
}
#mainMore{height:fixed;}
.mainContent p{font-size: 14px;}
}
@media only screen
and (min-width: 1201px) {
.main{font-size:28px; margin-top: 110px; margin-left: 10px;}
#mainNav{margin-left: 20px;}
.logo{display:none;}
.noMore{display:none;}
.rounded{
border-radius:0px;
padding: 10px;
margin-right: 10px;
background: none;
box-shadow: none;
}
}
/* -----------------------------------------
Page Name 2
----------------------------------------- */
Here is my html/php
<?php
/*
Template Name:Home Page
*/
?>
<?php get_header(); ?>
<div class="row mainContent">
<div class="seven columns mainContent">
<?php
$page_id = 2; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be embedded in the query string of the URL, e.g. page.php?action=edit&post=123.
$page_data = get_page( $page_id ); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page ( 123 ); ), WordPress will generate an error. By default, this will return an object.
echo apply_filters('the_content', $page_data->post_content); // echo the content and retain WordPress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem
?>
<p class="noMore"><a href="http://localhost:8888/austin.kitson.orgWP/more"><span class="plus">+</span><span class="more">more..</span></a></p>
</div>
<div id="profilePic" class="five columns">
<img src="<?php bloginfo('template_directory'); ?>/images/austin.jpg" title="austin kitson" />
</div>
</div><!--row ends-->
<div class="row">
<div id="mainMore" class="seven columns mainContent mainMore">
<?php
$page_id = 33; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be embedded in the query string of the URL, e.g. page.php?action=edit&post=123.
$page_data = get_page( $page_id ); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page ( 123 ); ), WordPress will generate an error. By default, this will return an object.
echo apply_filters('the_content', $page_data->post_content); // echo the content and retain WordPress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem
?>
</div>
</div><!--row ends-->
<?php get_footer(); ?>
I ended up just making the image position to absolute.