If setting the font-size to zero in the <ul> causes a problem in any devices, delete it and go from there. The <ul> will show space for an additional line below it.
The anchors are missing. According to your post and sample code, the text is supposed to be within anchors.
Copy the code that I posted into a file. It is a standalone web page. Give it a name with .html suffix. Double-click it and open it in your browser. It works.
WOW! That is great, I thank you very much for your time.
I do have another annoying issue with the site I am working on and the Bootstrap framework I am using. It is with regard to <h1> tags that are for example in a column
An <h1> is a block element which means that it stretches the full width of its container by default. If you change <h1> to {display:inline-block;} it’s width will shrink to fit its contents and behave as you describe.
This works on your page because the sum of the width of the two <h1> elements is greater than the width of their container. If the sum of their width were less than the width of their container, they would align in-line just like a sentence. You can delete a word or two from either line and see what I mean.
A more reliable technique is to enclose the text in each <h1> (block) element within <span> tags and set the <span> tags to {display:inline-block;} as shown here:
<h1><span>We aim to exceed our</span></h1>
<h1><span>customers expectations</span></h1>
The above examples demonstrate how to achieve your objective; however, would like to mention that a page is expected to have only 1 <h1> tag which expresses the company name or something of equal weight. Search engines see it as the most important header on the page. Using 2 <h1> tags is semantically poor code.
There may be a more “economical” way to do this, but the following example works with only 1 <h1> tag:
I need the margin or padding of the lists to match the orig example graphic I sent. I have tried but I cannot get this to be altered.
Also when you scale the example link down to say 800x600 it does not look good, is their a way I can display the content when scaled down into ‘blocks’
This demo code renders the same as your original graphic on my PC.
Comments highlight what each selector does and additional comments highlight relevant styles within each selector.
Reduce or eliminate the letter spacing and the width should be reducable to slightly narrower than 600px. You could do this gradually with media queries. Choice of font and font related styles affect the minimum width of each row. Your design is not intended to wrap, so you might want to apply a min-width to the to the page.
This is a slightly refined version of the technique that was suggested in post #2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1204989-Bootsrap-3-Inline-Full-Width-List-Problem
2014.04.11 18:44
mumford1
-->
<title>menu styles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="styles/bootstrap.css" rel="stylesheet">
<link href="styles/site.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,200,200italic' rel='stylesheet' type='text/css'>
<style type="text/css">
ul.nav-justified {
list-style:none;
[color=blue]font-size:0; /* setting the font-size to zero eliminates space beneath each row. */[/color]
text-align:justify;
padding:0;
margin:0 auto;
[color=blue]width:80%; /* adjust as needed. If "100%", then omit. */[/color]
}
/* justifies the lines and adds space beneath the rows */
ul.nav-justified:after {
content:'';
display:inline-block;
width:100%;
height:3px; /* space beneath rows */
}
/* colors words in the middle row red, if desired. ...or you could just target a class. */
ul.nav-justified:nth-child(even) li:nth-child(odd) {color:red}
/* assigns a font-size and font styles to list items. */
ul.nav-justified li {
display:inline-block;
width:auto;
[color=blue]font-size:.8rem; /* desired font-size should be applied here using a unit other than "em" or "percent". */[/color]
[color=red]font-family:arial; /* for this demo only. not expected to be copied to your working page */
text-transform:uppercase; /* for this demo only. not expected to be copied to your working page */
letter-spacing:.5em; /* for this demo only. not expected to be copied to your working page */[/color]
padding:2px 1px 3px;
}
/* increases the size of the bullets */
ul.nav-justified li:nth-child(even) {
font-size:1.2rem;
line-height:.4;
vertical-align:-.15rem;
}
</style>
</head>
<body>
<div class="container"> <!-- START ROW 5 -->
<div class="row clearfix">
<div class="col-md-12 footer-services">
<ul class="nav nav-justified">
<li>Heating</li>
<li>•</li>
<li>Cooling</li>
<li>•</li>
<li>Ventilation</li>
<li>•</li>
<li>Plumbing</li>
</ul>
<ul class="nav nav-justified">
<li>Design</li>
<li>•</li>
<li>Installation</li>
<li>•</li>
<li>Service</li>
<li>•</li>
<li>Maintenance</li>
<li>•</li>
<li>Emergency Call Out</li>
</ul>
<ul class="nav nav-justified">
<li>Boiler Replacements</li>
<li>•</li>
<li>Electrics</li>
<li>•</li>
<li>Renewable Energy</li>
<li>•</li>
<li>Gas Safety</li>
</ul>
</div>
</div>
</div> <!--END 3 ROW 5 -->
<hr />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
