2 replies [Last post]
eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 3 years 22 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Hi There!
My little responsive design project is coming along at http://aquariphone.com/demo/ but I can't figure out how to style the nav buttons when the mobile style-sheet is being called (when the browser window is smaller than or equal to 480px). Squish your browser down and you'll see what I mean. I would LIKE the nav buttons to stretch all the way across the viewport, but when I set a {width: 100%} the buttons fly out past the right of the window. This is my first responsive attempt, so I have much to learn. (although this is probably a basic css issue). Thanks very much for your help!
Bill

The html is:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
<title>SEO to Go</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" type="text/css" href="global.css">
 
<link href="desktop.css" type="text/css" media="screen and (min-device-width: 769px)" rel="stylesheet"/>
<link href="tablet.css" type="text/css" media="screen and (min-width:481px) and (max-width: 768px)" rel="stylesheet"/>
<link href="mobile.css" type="text/css" media="screen and (max-width: 480px)" rel="stylesheet"/>
 
</head>
 
<body>
<div id="wrapper">
<header>
<h1>SEO to Go</h1>
</header>
 
<div id="navCol">
<nav>
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="optimizing-content-for-seo.html">Content</a></li>
<li><a href="inbound-links.html">Inbound Links</a></li>
<li><a href="seo-keyword-research.html">Keyword Research</a></li>
<li><a href="local-page-placement.html">Local Pages</a></li>
<li><a href="seo-roi-tools.html">Gauging ROI</a></li>
</ul>
</nav>
</div><!-- end navcol -->
 
<div id="contentCol">
<section>
<h2>Welcome to SEO to Go</h2>
<article>
<h3>What is SEO?</h3>
<p><img src="images/girl-thinking.jpg" class="push-right" alt="Thinking About SEO">So you've constructed your website, but the days of 'build it and they will come' are long gone. What good is your website if nobody knows it exists? SEO is an acronym for <strong>Search Engine Optimization</strong>. This website will introduce you to the basics of how to optimize your site so it will rank well in search engines such as Google, Bing, Ask, and many others. After you've optimized your site, there are several necessary steps to take to ensure that the search engines believe that your site is relevant to the scope of the information you're providing.</p>
<h3>Just The Beginning...</h3>
<p>The algorhythms of the search engines are constantly changing and these tips mentioned here are far from exhaustive, but the tecniques will give you an excellent starting point for reaching your intended marketing goals.</p>
</article>
</section>
</div><!-- end contentCol -->
<footer>
<p>&copy;2013 This is a demonstration website which employs responsive design based on screen resolution</p>
<aside></aside>
</footer>
</div><!-- end wrapper -->
</body>
</html>

And the mobile style sheet looks like this right now:

@charset "utf-8";
/* CSS Document */
 
body, html {
	margin: 0;
}
 
body {background: #fff;}
 
#wrapper {
	width: 100%;
	min-width: 320px;
	margin: 0 auto 0;
}
 
header {
	width: 100%;
	height: 50px;
	background-color: #09F;
	margin: 0;
}
 
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	color: #000;
	padding: .5em 0 0 1em;
	text-align: center;
}
 
h2 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1.2em;
	color: #000;
	border-bottom: 1px solid #000;
	margin-bottom: 2em;
}
 
h3 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1em;
	color: #000;
	margin-bottom: .7em;
}
 
p {
	font-size: .8em;
	line-height: 1.8em;
	margin-bottom: 1em;
}
 
#navCol {
	width: 100%;
	background: url(images/bk_navCol.jpg) repeat-x;
}
 
nav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	margin-top: 1em auto;
}
 
ul {
	list-style-type: none;
	line-height: 1.7em;
	text-align: center;
}
 
li {
	line-height: 1.7em;
}
 
a {
	display: block;
	background: #09F;
	line-height: 1.2em;
	border: 2px solid black;
	border-radius: 10px;
	padding: .5em 2em;
	margin: .2em 0 0 0;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
}
 
a:hover {
	display: block;
	background: #FFF;
	line-height: 1.2em;
	border: 2px solid black;
	border-radius: 10px;
	padding: .5em 2em;
	margin: .2em 0 0 0;
	text-decoration: none;
	font-weight: bold;
}
 
nav a:link {color: #FFF;}
nav a:visited {color: #FFF;}
nav a:hover {color: #000;}
nav a:active {color: #000;}
 
#contentCol {
	width: 96%;
	background: #fff;
	padding: 2%;
}
 
img {
	width: 35%;
	border: 2px black solid;
	margin-left: 1em;
}
 
footer {
	width: 100%;
	clear: both;
	background-color: #09F;
	font-size: .7em;
	text-align: center;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

The nav buttons are set to

The nav buttons are set to display:block so you don't need to set the width to 100%.
The elements that contain it are the ones to look at specially the UL and LI.

eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 3 years 22 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Thanks Tony. Learning as I

Thanks Tony. Learning as I go! Cheers,
Bill