I am having trouble with the breakpoint at 640px. For some reason the page width enlarges when it breaks at 640px and makes a huge gap to the right, almost like there is a margine there. By the look of it the problem lyes with the logo size. The browser thinks it is wider than it really is. Hopfully the code can clear it up for you so you can see what im talking about...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Webbit Design</title>
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
</head>
<body>
<div class="container clearfix">
<div id="logo" class="grid_4">
<img src="img/webbit-logo.png" alt="">
</div>
<div id="nav" class="grid_8 omega">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
<div id="intro-home" class="grid_12">
<h1>Welcome</h1>
<p>Bblah blah. <p></p>
</div>
<div id="copyright" class="grid_12">
<p>© Webbit Design. All Rights Reserved.</p>
</div>
</div>
</body>
</html>
/*global*/
body {
font-family: 'Oxygen', sans-serif;
font-size: 0.8em;
line-height: 25px;
background: #fff;
color: #000000;
margin: 3em 6.5em;
}
a {
color: #444;
text-decoration: none;
}
a:hover {
color: #50B748;
}
/*typography*/
h1 {
font-size: 4em;
font-weight: bold;
letter-spacing: -0.05em;
margin: 0;
line-height: 0.8em;
}
h2 {
font-size: 2.3em;
font-weight: normal;
letter-spacing: -0.05em;
margin: 0;
}
}
h3 {
font-weight: 100;
font-size: 1.125em;
color: #444;
}
p {
font-size: 1em;
line-height: 25px;
font-weight: lighter;
}
/*navigation*/
#logo {
margin: 5% 0 1% 38.6%;
}
#nav {
margin-left: 34%
}
#nav ul {
width: 100%;
margin: 8% 0 30 90;
list-style: none;
float: right;
}
#nav ul li {
float: left;
}
#nav ul li.home {
width: 15%;
}
#nav ul li.detail {
width: 15%;
}
#nav ul li.work {
width: 15%;
}
#nav ul li.contact {
width: 15%;
}
}
#nav ul li a {
color: #444;
display: block;
text-decoration: none;
}
#nav ul li a:hover {
color: #50B748;
}
/*content*/
p .quote{
font-style: italic;
}
img .quote-close{
margin-left: 50px;
}
}
#new-work {
margin-top: 2%;
}
#new-work img {
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 8px;
margin: 0 0 0% 0;
}
#featured-work {
margin-top: 2%;
}
#featured-work img {
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 8px;
margin: 0 0 0% 0;
}
#contact {
margin-top: 2%;
clear: both;
border-top: 1px solid #aaaaaa;
}
#contact span{
color: #50B748;
font-weight: 600;
}
#copyright {
border-top: 1px solid #aaaaaa;
padding: 2% 0;
margin: 2% 0;
margin-left: 1%;
text-align: center;
}
/* Form */
#form {
width: 90%;
background: #EEE;
padding: 20px 30px 20px 30px;
color: #444;
border:1px solid #DADADA;
}
}
#form h1>span {
display: block;
font-size: 11px;
}
#form label {
display: block;
margin: 0px 0px 5px;
}
#form label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
#form input[type="text"], #form input[type="email"], #form textarea,#form select{
border: 1px solid #DADADA;
color: #888;
height: 24px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
}
#form textarea{
height:100px;
}
#form .button {
background: #50B748;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
}
#form .button:hover {
background: #444
}
/*Work*/
.work-img {
margin-top: 20px;
max-width: 100%;
}
.line {
}
/*media queries*/
/* Tablet ----------- */
#media screen and (max-width: 1024px) {
.container {
margin-right: 0;
}
#intro {
width: 100%;
}
#intro h1 {
margin: 0 0 0% 0;
}
#logo img {
margin-left: -16%;
margin-bottom: -15%;
}
#nav ul {
}
#nav ul li {
float: left;
margin: 5% 0 0 -2.5%;
}
#nav ul li.home {
width: %;
}
#nav ul li.detail {
width: %;
}
#nav ul li.work {
width: %;
}
#nav ul li.contact {
width: %;
}
}
/* Small ----------- */
#media screen and (max-width : 640px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width:100%;
}
.container {
margin-right: 0;
}
#logo img {
max-width: 100%;
margin-right: 0;
}
#nav ul {
font-size: 1.2em;
}
#nav ul li a {
-webkit-user-select: none;
font-size: 0.750em;
}
#nav ul li {
}
#nav ul li.home {
width: 10%;
text-align: center;
}
#nav ul li.detail {
width: 20%;
text-align: center;
}
#nav ul li.work {
width: 10%;
text-align: center;
}
#nav ul li.contact {
width: 20%;
text-align: center;
}
#featured-work, #new-work {
margin: 5% 0;
}
h1 {
line-height: 0.7em;
}
The other break point seems to be fine!
Thanks
In regards to my comment above, this is what the media query should look like:
/* Small ----------- */
#media screen and (max-width : 640px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width:100%;
}
.container {
margin-right: 0;
}
#logo img {
max-width: 100%;
margin-right: 0;
}
#nav ul {
font-size: 1.2em;
}
#nav ul li a {
-webkit-user-select: none;
font-size: 0.750em;
}
#nav ul li {
}
#nav ul li.home {
width: 10%;
text-align: center;
}
#nav ul li.detail {
width: 20%;
text-align: center;
}
#nav ul li.work {
width: 10%;
text-align: center;
}
#nav ul li.contact {
width: 20%;
text-align: center;
}
#featured-work, #new-work {
margin: 5% 0;
}
h1 {
line-height: 0.7em;
}
}
The logo has the class .grid_4, and the navbar has the class .grid_8, which means that at your 640px breakpoint their width is set to 100%. Coupled with their margins that will make those elements extend outside their parent container.
To fix this you'll need to override the rule that is setting their width to 100%. In your 640px media query add:
#logo, #nav {
width: auto;
}
Related
I am building a personal website, and want to get a dropdown menu working. So far the first part is working, but the second (dropdown in dropdown) isn't.
It is the "Alternate History" line that isn't showing up.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#links img,
footer img,
li img,
h1 img,
h2 img,
h3 img,
p img,
.dropme img {
height: 1em;
}
footer {
clear: both;
text-align: center;
padding-top: 2em;
}
body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 1em;
background: #111;
color: #eee;
}
html {
padding-bottom: 500px;
}
dt {
color: orange;
margin-top: 2px;
}
dd {
margin-bottom: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.68);
}
h1 {
color: red;
}
h2 {
color: goldenrod;
}
h3 {
color: teal;
}
a {
color: lime;
text-decoration: none;
}
a:hover {
color: red;
}
.menubar li a {
display: block;
}
.menubar {
display: inline-block;
margin: 0;
padding: 0;
zoom: 1;
}
nav {
margin-left: auto;
margin-right: auto;
font-size: large;
text-align: center;
}
.menubar li {
display: block;
float: left;
width: 100px;
min-height: 1.5em;
background: #222;
border: #444 solid 2px;
padding: 3px;
margin: 4px;
}
.menubar li:hover {
background: #000;
}
.menubar a {
text-decoration: none;
}
.menubar li ul {
visibility: hidden;
position: absolute;
padding-top: 10px;
}
.menubar li:hover ul {
visibility: visible;
padding-left: 0;
margin-left: -7px;
}
.menubar li ul li {
float: none;
position: relative;
width: 150px;
text-align: left;
}
code {
color: green;
/* overflow-x: auto; */
}
/* pre { */
/* background: var(--color256); */
/* border: 1px solid var(--color8); */
/* border-radius: 4px; */
/* padding: 5px; */
/* display: block; */
/* align: center; */
/* max-width: 900px; */
/* /1* background: #1d2021; *1/ */
/* } */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smash Civilization's Homepage</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="menubar">
<h1><big>Smash Civilization</big></h1>
<div id="links">
<div class="cat">
<li>Home</li>
<li>About</li>
<li>Literature
<ul>
<li>Category</li>
<ul>
<li>Alternate History</li>
</ul>
<li>Dewey Decimal</li>
</ul>
<li>Issues</li>
<li>Podcasts</li>
<li>Talks</li>
<li>Vision</li>
</div>
</div>
</ul>
</nav>
</body>
</html>
What do I need to fix to get this working correctly? Any help is most appreciated!
I have a problem with my responsive menu and I can't figure out where is it.
It's hard to explain so go to my website http://untruste.altervista.org/home.html
Now resize the windows since you get the responsive version, open the menu and the close it.
Resize the window since you get the desktop version, as u can see the menu disappeared! (If you refresh the page it comes back)
desktopstyle:
header {
padding-bottom: 2%;
border-radius: 10px;
width: 70%;
margin: auto;
}
#headerTitle h1{
display: block;
}
#headerTitle {
padding-top: 1%;
text-align: center;
line-height: 1.8em;
}
header img {
display: block;
margin: 2%;
width:7em;
}
header h1 {
width: 80%;
margin: auto;
font-size: 1.8em;
letter-spacing: -0.04em;
}
header h2 {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5em;
letter-spacing: -0.06em;
}
#menu {
display: block;
width: 80%;
margin: auto;
border:none
}
#menu ul li {
display: inline-block;
width:auto;
margin-left:auto;
margin-right: auto;
padding:2px;
border: none;
font-size: 0.9em;
}
#selected {
background: #00715f;
padding:0 1em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 70%;
padding-top: 1%;
border-radius: 10px;
font-size: 0.9em;
}
article a {
color: #004040
}
article h1 {
padding: 7px 7px 7px 30px;
width:auto;
margin-left: -30px;
margin-right: 30%;
text-align: left;
}
article h2 {
margin-left: -30px;
margin-right: 60%;
}
.articleText {
width:70%;
margin:auto;
}
#linkmap {
display: none;
}
iframe {
display: block;
border: none;
}
footer {
width:70%;
margin: auto;
border-radius: 10px;
font-size: 0.9em;
font-family: Times, serif;
}
mobilestyle
body {
}
header {
}
footer {
font-size: 0.7em;
}
#headerTitle h1{
display: none;
}
.icon {
margin-right:10px;
font-size:2em
}
.icon::after
{
content:'≡';
}
.icon-close::after
{
margin-right:10px;
font-size:2em;
content:'×';
font-weight: normal;
font-style: normal;
}
#headerTitle {
padding-top: 5px;
}
header img {
display:none
}
header h1 {
font-size: 1.4em;
letter-spacing: -0.04em;
}
header h2 {
font-size: 1.1em;
}
#menu {
border-bottom: 1em solid #00715f;
}
#menu ul li {
display: block;
height:2em;
width:100%;
margin-left:-3.5%;
font-size:1.2em
}
.menu_button {
display: block;
text-decoration: none;
text-align: right;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
background: #00715f;
color: #ececec;
}
#selected {
background: #00715f;
padding:0 5em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 100%;
font-size: 0.8em;
}
article h1 {
width:100%;
margin-right: 20%;
padding:7px 0 7px 0;
text-align: center;
}
article h2 {
margin-right: 10%;
}
.articleText {
width:90%;
margin:auto
}
#linkmap{
display: block;
border: none;
}
iframe {
display: none;
}
style:
body {
background:#004040;
color: #005b4d;
text-align: center;
font-family: "Georgia", "Times", serif;
}
a {
color: #00715f;
}
a:hover {
font-style: italic;
}
header {
background: white;
width: 100%;
height:auto
}
header h1,h2 {
display: block;
font-weight: normal;
}
footer {
background-color: #ffffff;
width: 100%;
padding: 2% 0;
}
#menu ul li {
list-style: none;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: #005b4d;
}
article {
background: white;
text-align: justify !important;
padding-bottom: 1%;
margin: 5% auto;
}
article h1 {
background: #00715f;
color: #fff;
width:100%;
margin-right: 20%;
text-shadow: 0 1px 0 #403232;
font-weight: normal;
text-align: center;
}
article h2 {
background: #00715f;
color:#fff;
padding: 7px 7px 7px 30px;
font-weight: normal;
font-size: 1.2em;
}
This the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media= "(min-width: 240px) and (max-width:1023px)" type="text/css"
href="css/mobilestyle.css">
<link rel="stylesheet" media="(min-width:1024px)" type="text/css" href="css/desktopstyle.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="script.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>ArteLab Responsive</title>
</head>
<body>
<header>
<img style="float:left" src="logos/artelab.png" alt="logo_artelab">
<img style="float: right" src="logos/insubria.png" alt="logo_insubria">
<div id="headerTitle">
<h1>Applied Recognition Technology Laboratory</h1>
<h2>Department of Theoretical and Applied Science</h2>
</div>
<a class="menu_button" href="#"><span class="icon">≡</span> </a>
<div id='menu'>
<nav>
<ul>
<li>LINK1</li>
<li>lINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li><a id="selected" href="link">LINK6</a></li>
</ul>
</nav>
</div>
</header>
and this is the script I use to open the menu in the responsive version
jQuery(document).ready(function() {
$('.menu_button').click(function() {
$("#menu").slideToggle();
$(this).find('span').toggleClass('icon icon-close');
});
});
You can try this:
In your desktop styles just do :
#menu {
display: block!important;
}
Your slideToggle() to the menu is causing it to have display:none in the style attribute. So we just overwrite that in desktop.
I have problem aligning three boxes to the center of section.
Here is what I have so far:
/*==============Custome Css ====================*/
.slider_patch {
background: rgba(63, 61, 61, 0.61);
padding: 0px 15px;
box-shadow: 1px 1px 28px #2F2F2F;
}
button.small.skyblue a {
color: #fff;
}
/*==============Custome Css ====================*/
/* #Misc
================================================== */
/* EXTRAS */
.brdr-r1, .brdr-r2 { border-right: 1px solid #e5e5e5; padding-right: 19px; }
.brdr-l1, .brdr-l2 { border-left: 1px solid #e5e5e5; padding-left: 19px; }
.brdr-r2 { padding-right: 27px; }
.brdr-l2 { padding-left: 27px; }
.pad-r27 { padding-right: 27px; }
.pad-l27 { padding-left: 27px; }
.alignright { text-align: right; }
img.alignright { float: right; }
.alignleft { text-align: left; }
img.alignleft { float: left; }
.aligncenter { text-align: center; }
.wp-caption { display: block; color: #444; }
.wp-caption-text { font-size: 15px; }
.sticky { color: #555; }
.gallery-caption { display: inline; }
.bypostauthor { font-size: 13px; }
.moonicons-box1 { font-size: 16px; display: inline-block; width: 15em; padding: .25em .5em; background: #fff; margin: .5em 1em .5em 0; border: 1px solid #e8e8e8; }
.alignright { text-align: right; }
img.alignright { float: right; }
.alignleft { text-align: left; }
img.alignleft { float: left; }
.aligncenter { text-align: center; }
.wp-caption { display: block; color: #444; }
.wp-caption-text { font-size: 15px; }
.sticky { color: #555; }
.gallery-caption { display: inline; }
.bypostauthor { font-size: 13px; }
/* Scroll to top */
#scroll-top a { width: 16px; height: 16px; padding: 6px 8px 9px; border-radius: 4px; background: #818c90; position: fixed; bottom: 48px; right: 32px; display: none; opacity: 0.89; filter: alpha(opacity=89); z-index: 499841; }
#scroll-top a i { font-size: 16px; color: #fff; display:block; }
#scroll-top a:hover { background-color: #ffcc00; cursor: pointer; }
h1.pnf404 { font-size: 176px; line-height: 1.1; font-weight:900;}
h2.pnf404 { font-size: 42px; line-height: 1.2; font-weight:700; }
input.txbx404 { float:left; margin-top:2px; margin-right:4px; padding:7px 4px; min-height:inherit; border-radius:3px; }
input.btn404 { float:left; margin:1px; padding:8px 12px 9px; }
.v-shadow-l { background:url(../images/v-shadow-left.png) no-repeat right center; }
.v-shadow-r { background:url(../images/v-shadow-right.png) no-repeat left center; }
.v-shadow-r, .v-shadow-l { min-height:320px; }
.pad-r10 { padding-right:10px; }
.pad-r20 { padding-right:20px; }
.pad-r30 { padding-right:30px; }
.pad-r40 { padding-right:40px; }
.pad-l10 { padding-left:10px; }
.pad-l20 { padding-left:20px; }
.pad-l30 { padding-left:30px; }
.pad-l40 { padding-left:40px; }
/* #Column Shortcodes
----------- */
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { margin-right: 3%; float: left; margin-bottom:2px; }
.one_half { width: 48%; }
.one_third { width: 30.6666%; }
.two_third { width: 65.3332%; }
.one_fourth { width: 22%; }
.three_fourth { width: 74%; }
.one_fifth { width: 16.8%; }
.two_fifth { width: 37.6%; }
.column-last { margin-right: 0 !important; clear: right; }
.easyPieChart { position: relative; text-align: center; }
.easyPieChart canvas { position: absolute; top: 0; left: 0; }
.pie { text-align:center; font-size:49px; position:relative; margin:0 auto 20px; }
.pie p { font-size:16px; color:#888; font-weight:400; position:absolute; bottom:-52px; width:100%; padding-top:10px; border-top:2px solid #f9f9f9;}
.container .pie p { margin-bottom:0;}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {
.img-box { width: 256px; height: 188px; }
.last-project .img-box { background: #EA3C3C; }
.last-project .img-box:nth-child(even) { background: #F66060; }
.ab-box { height: 235px; }
.author-detail { width: 218px; }
.comment-contents { width: 343px; }
.child-comment .comment-contents { width: 263px; }
.contact input { width: 330px; float: none; }
.contact textarea { width: 486px; }
.row.magic, .s-qoute-man { padding: 0; margin-bottom: 10px; }
a.get { margin-bottom: 14px; }
.pad-r10, .pad-r20, .pad-r30, .pad-r40 { padding-right: 5px; }
.pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding-left: 5px; }
#main-content-pin .container { width: auto; }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
#boxed-wrap { width: 828px; }
.social-icons a { margin: 1px 4px 0 4px; }
.row.magic { padding-left: 20px; margin-bottom: 10px; }
#tline-content { width: 800px; }
.tline-box { width: 335px; }
/*#nav a span, #nav a:after { font-size:9px; }*/
.blog-date-sec { width: 42px; height: 42px; }
.help-box { width: 50%; }
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
.sidebar, .rgt-cntt, .sidebar.leftside { padding-right:0; background:none; padding-top:40px; margin-top:40px; border-top:5px solid #e5e5e5;}
.rgt-cntt, .sidebar.leftside { padding-top:0px; margin-top:0px; border-top:0 none;}
.contact-form .txbx { width:224px;}
.pricing-table .plans-f-list.respo { display:inline; visibility:visible;}
#header.super-fixed { height:auto; box-shadow:none; border-bottom:4px solid #f0f0f0;}
#headline { height:auto; border-bottom:3px solid #f3f3f3; padding:14px 0; }
#headline h3 { border-top-color:#f6f6f6; font-size:37px; text-align:center;}
#headline h3 small { display:block; margin-top:14px; margin-bottom:0; font-size:16px; letter-spacing:0; font-weight:400; }
.servobx, .servobx div, .servobx img, ul#main-ibox li, ul#main-ibox li.active9 { width:100%; float:none;}
#search-form { display:none; }
#header .alignright, top-inf.alignright { text-align:center;}
#search-form2 { display:block; }
#side-content { padding-bottom:30px; border-bottom:5px solid #f3f3f3; margin-bottom:40px;}
.top-bar { height:65px; padding:5px 0 6px; background:url(../images/topsobg1.png) repeat-x center center; white-space:nowrap; overflow:hidden;}
.top-bar h6 { font-size:11px; letter-spacing:0; margin:0 10px 0 0;}
.top-bar h6 i { font-size:12px; width: 12px; height: 12px; text-align: center; padding:3px; margin-right:3px; }
.top-bar .socailfollow, .top-links, .top-links.rgtflot, .top-bar .socailfollow.lftflot { float:none; text-align:center; clear:both; min-height:22px;}
.top-bar .socailfollow, .top-bar .socailfollow.lftflot { padding-top:8px;}
.top-bar .socailfollow a, .top-bar .socailfollow.lftflot a, .top-links p, .top-links img { float:none; display:inline; padding-top:10px; background:none;}
.top-links, .top-links.rgtflot { margin:0 0 8px 0; padding-top:4px; }
.top-links.rgtflot { margin-top:12px; margin-bottom:6px;}
.container hr { margin-left:0; margin-right:0;}
.blog-date-sec { border:0 none; margin:0; text-align:left; border-bottom:1px solid #e5e5e5; background:#fdfdfd;}
.blog-post { border-bottom-width:3px;}
.nav-search { float: none; margin: 0; }
.img-box { width: 420px; height: 308px; }
.comment-contents { width: 328px; margin-right: 0; }
.child-comment .comment-contents { width: 248px; }
.contact textarea { width: 398px; }
.author-detail { margin: 20px 0; }
.blog-date-sec { width: auto; display:block; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; border-bottom: 2px solid #e3e3e3; margin-bottom: 5px; }
.blog-date-sec span, .blog-date-sec h3 { display: inline; margin: 0 10px; line-height: 50px; }
.blog-date-sec span { font-size: 20px; font-weight: 300; }
.blog-date-sec h3 { font-size: 32px;}
.contact-form .txbx { width: 224px; }
.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
#headline h3 { border-top-color: #f6f6f6; }
.image-gallery ul li, .image-gallery ul li img { display:block; width:auto; max-width:100%; height:auto; float:none;}
input[type="text"].header-saerch, input[type="text"].header-saerch:focus { width: 261px; margin-top: 10px; }
.logo { text-align: center; }
.pin-box { width: 256px; }
.tline-box .blog-date-sp { width: 80%; }
.tline-box .blog-com-sp { width: 0; display: none; }
.tabs-left > .nav-tabs, .tabs-left > .nav-tabs > li > a, .nav-tabs > li, .nav-tabs > li.active, .tabs-left > .nav-tabs > li.active > a, .tabs-left > .nav-tabs .active > a:hover { width:100%; display:block; padding-left:0; padding-right:0; }
.tabs-left > .nav-tabs > li > a { border-right:0 none;}
.tabs-left > .tab-content { border:0 none;}
.tab-content .columns, .tab-content .column { margin:0 10px; max-width:90%; }
.date-sp-wrap { margin: 0; float: right; margin-bottom: 7px; }
.blog-line .blog-date-sec { height: auto; }
.v-shadow-r, .v-shadow-l { min-height: inherit; background: none; }
.pad-r10, .pad-r20, .pad-r30, .pad-r40, .pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding: 0; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { width: 100%; float: none; margin-right: 0; }
.latest-f-blog, .qot-week { margin:0;}
.callout { margin:10px 0px 20px; }
.brdr-l1, brdr-r1 { padding:0; border:0 none; }
.brdr-l1 { margin-top:30px;}
.tab-content p, .tab-content li { font-size: 12px; }
.help-box { width: 100%; }
.ab-box { height: auto; padding-bottom: 25px; }
input[type="text"].header-saerch, input[type="text"].header-saerch:focus { float: none; display: inline; position: relative; z-index: 10000; }
.jcarousel-next, .jcarousel-prev { padding:12px; }
.jcarousel-prev { right:38px;}
.jcarousel-next:after, .jcarousel-prev:after { top:13px; right:13px;}
.our-clients-wrap .jcarousel-next, .our-clients-wrap .jcarousel-prev { padding:10px;}
.is-sticky, .is-sticky #header { position:relative; height:auto;}
.is-sticky #header { margin-top:0;}
.is-sticky .logo { height:auto; margin-top:0; }
.is-sticky .logo img { max-height:auto; height:auto; }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
.help-block { height: auto; }
#boxed-wrap { width: 460px; }
.page-subtitle { left: 0; padding: 10px 0 0 20px; bottom: 0; border-bottom: 1px solid #e8edee; margin-bottom: 20px; height: auto; width: auto; clear: both; background: #fdfdfd; border-radius: 0; }
.contact-form .txbx { width: 338px; }
.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
.jcarousel-item, .last-project .portfolio-item { max-width: 210px; height: 157px; float: left; }
.pin-box { width: 166px; width: 164px\9; }
#tline-content { width: 460px; }
.tline-box { width: 165px; }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
.nav-wrap2.mn4 #nav a { padding: 15px 4px; }
#menu a { padding: 15px 4px; }
.img-box { width: 300px; height: 220px; }
.author-detail { width: 254px; }
.author-arrow { width: 11px; height: 6px; background: url('../images/testimonial-arrow-top.png') no-repeat; left: 25px; top: -6px; }
.contact input { width: 288px; margin-right: 0; }
.contact textarea { width: 278px; }
#boxed-wrap { width: 340px; }
.footbot { min-height: 38px; height: auto; }
.page-subtitle { left: 0; padding: 10px 0 0 20px; bottom: 0; border-bottom: 1px solid #e8edee; margin-bottom: 20px; height: auto; width: auto; clear: both; background: #fdfdfd; border-radius: 0; }
.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
.pricing-table ul { width: 136px; }
.pricing-table ul li { width: 124px; padding: 5px; }
.pricing-table ul li.plan-header, .pricing-table ul li .plan-title, .pricing-table ul li .plan-price { max-width: 136px; }
.pricing-table ul li.plan-footer { max-width: 114px; }
.portfolio-item { margin-bottom: 14px; }
.commentin { width: 92%; }
#tline-content { width: 300px; }
.tline-box { width: 250px; }
.tline-row-l, .tline-row-r { display: none }
.tline-box.rgtline { float: left; left: 0; }
}
#media only screen and (min-width: 1200px) {
#boxed-wrap { width:1180px;}
.white-space { height:110px;}
h4.subtitle { margin:39px 0 21px 0; }
#main-content-pin .container { padding:0 40px; }
.sidebar.leftside { background-position: 295px; padding-right:70px; }
.blog-date-sec h3 { font-size:36px;}
}
#media screen and (min-width: 767px) {
/* ensure #nav is visible on desktop version */
#nav { display: block !important; }
.ls-layer h1, .ls-layer h3 { left:10px;}
}
button.small.skyblue.demooo {
width: 65%;
/*border-bottom: 6px solid rgb(0, 150, 192);*/
}
li.color {
background-color: rgb(197, 197, 197);
padding: 4px;
}
section.container.first-block.aligncenter.colorbar {
/*background: rgb(0, 173, 239);*/
/* width: 100%; */
/* left: 10px; */
padding: 0px 38px 0px 38px;
}
h4.slight.frontsight {
color: #333;
}
figure.shop-item.one_fourth.boxwrap {
background: white;
margin-bottom:35px;
border-radius: 4px;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.42);
/*margin-right:10px;
width: 17%;*/
/* padding: 6px; */
/* left: 99px; */
/* color: black; */
/* padding: 0px; */
/* top: 18px; */
}
h4.fronttext {
font-size: 15px;
line-height: 24px;
/* color: black !important; */
}
figure.shop-item.one_fourth.boxwrap:hover {
background: rgba(239, 239, 239, 1);
/* color: white; */
}
/* --------Custom CSS-------------*/
table {
width:100%;
}
table tr{
height:20px;
}
table tr td p{
margin-bottom:0px;
}
tr:nth-child(even) {
background-color: rgb(166, 206, 244);
}
tr:nth-child(odd) {
background-color: rgb(207, 230, 252);
}
tr:nth-child(even):hover {
background-color: rgb(242, 244, 245);
}
tr:nth-child(odd):hover {
background-color: rgb(242, 244, 245);
}
td:nth-child(even) {
vertical-align:middle;
text-align:left;
padding:10px;
}
td:nth-child(odd) {
vertical-align:middle;
text-align:left;
padding:10px;
}
.parallax-sec .blox{
padding:20px 0 0px;
}
.eleven.columns .shop-wrap figure{
margin-right: 3%;
}
table.product-details caption{
float:left;
}
.product-details{
width:100%;
}
.contact-inf p{
margin-bottom:10px;
}
.response{
height:600px;
width:80%;
margin:0 auto;
display:block;
padding:60px 50px;
text-align:center;
font-size:14;
}
.ls-layer h2{
font-size:40px !important;
}
/*---------Custom CSS--------------*/
<section class="container first-block aligncenter colorbar">
<hr class="vertical-space3">
<h2 class="mex-title">Welcome to the Polymers Enterprises</h2>
<h4 class="slight frontsight">Scaling new heights on the strength of Excellence, Efficiency & Ethics</h4>
<hr class="vertical-space3">
<div class="services">
<div class="one_fourth">
<article class="icon-box1"><i class="fa-user"></i>
<h5>ABOUT US</h5>
<p>For over 30 years, Polymers Enterprises has developed a record of service, growth and reliability unsurpassed....</p>
<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
</article>
</div>
<!--<div class="one_fourth">
<article class="icon-box1"><i class="li_bulb"></i>
<h5>EFFICIENCY</h5>
<p>We have made good relationship with customers by supplying them excellent quality products, which help us to ...</p>
<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
</article>
</div>-->
<div class="one_fourth">
<article class="icon-box1"><i class="li_note"></i>
<h5>WHAT WE DO</h5>
<p>Our policy is to achieve Quality in supply chain and maximize the serviceability to the client coupled with quality of cost....</p>
<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
</article>
</div>
<div class="one_fourth column-last">
<article class="icon-box1"><i class="fa-cubes"></i>
<h5>OUR PRODUCTS</h5>
<p>Polymer Enterprises provides a wide range of products and consulting services to customers .....</p>
<button type="button" class="small skyblue demooo" onclick="window.location.href='our_products.html'">Read more</button>
</article>
</div>
</div>
</section>
I have tried giving width display:block, display:inline-block and margin: 0 auto but no luck.Also I have been to almost all questions here but noone helped me. Can anyone help me get it sorted?
Here is Fiddle
Thanks !
Making them display: inline-block does work, you just need to remove the float.
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth {
margin-right: 3%;
display: inline-block; /* remove float and add display inline-block */
margin-bottom:2px;
}
Demo
Note: Add vertical-align:top; if you want the content in each to line up, demo here.
On my site, all the pages of text, stay within the wrapper which goes to the bottom of the page. For some reason on a page with images, the wrapper doesn't go to the bottom, nor does the div which holds the images.
Here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="../../../CSS/JJ.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Work
<ul class="submenu">
<li>Print
</li>
<li>Branding
</li>
<li>Photography
</li>
</ul>
</li>
<li>Blog
</li>
<li>Inspired
</li>
<li>Contact
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<h1>TREE TOP NEWS</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Tree Top News/P7158702.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158703.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158711.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158701.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/Tree Top News 2010-6.jpg" alt="Tree Top" class="image" height="378" width="580">
</div>
</div>
</div>
</body>
</html>
Here is the CSS
#wrapperfull {
min-height: 100%;
width: 1050px;
border: none;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin-right: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#head {
height: 100px;
width: 1050px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
}
#header {
height: 135px;
width: 1045px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
}
#footer {
position: absolute;
width: 1050px;
height: 85px;
bottom: 0;
padding: 0px;
margin-bottom: 150px;
}
.footer-style {
padding: 40px;
}
h1 {
font-family: "geogtq md";
color: #00BDE5;
font-size: 25px;
text-decoration: none;
margin-top: 35px;
}
h1:hover {
color: #007889;
font-size: 25px;
}
h2 {
font-family: Helvetica, sans-serif;
color: #00BDE5;
font-size: 25px;
text-decoration: none;
}
h2:hover {
color: #007889;
font-size: 25px;
}
p {
font-family: Helvetica, sans-serif;
color: #01778B;
font-size: 12px;
text-align: justify;
}
img {
float: right;
}
html {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/stripe_70d2cce6f1e8675c4b38e18625444054.png);
background-repeat: repeat;
}
/* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */
.container {
height: 100%;
width: 1050px;
margin-top:120px;
display: inline-block;
background-color: #FFF;
}
.heading {
height: 90px;
width: 750px;
float: left;
margin-top: 70px;
position: fixed;
background-color: #FFF;
margin-bottom: 35px;
margin-left: auto;
}
.blog-container {
min-height: 100%;
width: 700px;
margin-top: 170px;
margin-right: 0px;
background-color: #FFF;
}
.work-container {
min-height: 100%;
width: 585px;
margin-top: 70px;
background-color: #FFF;
}
.slideshow {
width: 900px;
list-style: none;
position: relative;
margin-top: 25px;
}
ul.slideshow li {
position: absolute;
left: -2px;
top: -9px;
display: inline;
}
.navigation {
height: 150px;
width: 600px;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
}
.menu-holder ul {
height: 120px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
line-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
.menu-holder ul li:hover ul {
display: block;
float: left;
color: #000;
}
.menu-holder ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
display: block;
color: #00BDE5;
text-decoration: none;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 0px;
}
.menu-holder ul li a:hover {
color: #007985;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 35px;
left: -10px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -10px;
margin-right: 20px;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
-webkit-border-radius: 0;
}
a:link {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
a:hover {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
ul {
font-size: 15px;
margin: 0;
padding: 0;
list-style: none;
margin-right: 40px;
}
ul li, ul li ul li {
display: inline;
position: relative;
float: left;
color: #00BDE5;
}
li ul {
display: none;
width: 450px;
margin-right: 20px;
}
ul ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
margin-right: 15px;
white-space: nowrap;
color: #00BDE5;
margin-right: 20px;
}
li:hover ul {
display: inline;
position: absolute;
}
li:hover li {
float: none;
font-size: 15px;
margin-top:3px;
}
.services1 a {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #00BDE5;
float: left;
list-style-type: none;
}
a:link {
text-decoration: none;
color: #00BDE5;
font-family: Helvetica, sans-serif;
text-align: center;
}
a:hover {
text-decoration: none;
color: #007889;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Thumb size 230 x 150 px */
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: Helvetica, sans-serif;
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: Helvetica, sans-serif;
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: centre;
font-size: 12px;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: Helvetica, sans-serif;
text-align: centre;
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
.project {
width: 580px;
height: 1000px;
margin-top: 0px;
margin-right: 100px;
left: auto;
background-color: #fff;
}
.single .header {
position:static
}
.single #sidebar a {
color:#000;
}
.single #sidebar a:hover {
color:#4f4f4f
}
.image {
margin: 0px;
padding-bottom:50px;
}
/* Set fixed top margin */
#sidebar {
width: 273px;
height: 200px;
left: 50%;
top: 165px;
background-color: #FFF;
padding: 10px 20px 10px 10px;
color:#00C0EE;
font-family: Helvetica, sans-serif;
position: fixed;
color: #007789;
font-size: 15px;
}
#sidebar h1 {
font-family: Helvetica, sans-serif;
padding: 5px 0 15px 0;
font-weight: normal;
font-size: 18px;
color: #00C0EE;
}
#sidebar p {
padding-bottom: 15px;
font-family: Helvetica, sans-serif;
color: #007789;
height: 100%;
}
#sidebarwrapper {
right: 822px;
position: absolute;
width: 205px;
height: 200px;
top: 248px;
}
* {
margin: 0; padding: 0;
}
#page-wrap {
width: 600px;
margin: 15px auto;
position: relative;
}
#sidebar ul {
background: #EEE;
padding: 10px;
}
li {
float: left;
display: inline;
}
#main {
width: 700px;
float: left;
}
http://jsfiddle.net/Q6Lze/
You need a clearfix to clear the floats contained within. This forces the div containing the floated images take up that space instead of collapse into itself:
.project:after {
display: table;
content: '';
clear: both;
}
Or just add it to div:after instead
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.