Responsive UL lists

HTML & CSS
1

Hi,
I’m a newcomer to web development & design and I’m having a spot of bother with creating a responsive ul list.

The site I’m working uses the 1140 grid and has a ul in the footer. In particular I’m having difficulty centring the ul and getting it to stay centre when the browser is resized and it eventually overlaps the resized div.

An example of the code I have been experimenting with is attached below. Does it just need a few tweaks or are there any better solutions? Any advice is gratefully received!!!

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Rugby Player Positions</title>



<style type="text/css">


h1{
    padding-left:120px;
	font-size: 1.5em; /* 25px/16px */
}
#content
{
    background-color:#CCC;
    font-size: .75em; /* 12/16 */
    max-width: 1140px;
    text-align: left;
    margin: 0px auto; /*auto centers the container */
    padding: 3.27251308901%; /* 25/1140 */
}
/*CSS3 multiple columns.*/
/* Get em size for colums: 232/16 */
.columns
{
    padding-left: 120px;
    -moz-column-width: 14.5em; /* Firefox */
    -webkit-column-width: 14.5em; /* webkit, Safari, Chrome */
    column-width: 14.5em;
}
/*remove standard list and bullet formatting from ul*/
.columns ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child
{
    margin-top:0px;
}

</style>
</head>
<body>
<div id="content">
    <h1>Rugby Player Positions</h1>
     <div class="columns">
         <ul>
            <li>Looose Head Prop</li>
            <li>Hooker</li>
            <li>Tight Head Prop</li>
            <li>Lock</li>
            <li>Lock</li>
            <li>Blindside Flanker</li>
            <li>Number 8</li>
            <li>Openside Flanker</li>
            <li>Scrum Half</li>
            <li>Fly Half</li>
            <li>Left Wing</li>
            <li>Inside Centre</li>
            <li>Outside Centre</li>
            <li>Right Wing</li>
            <li>Full Back</li>
           </ul>
     </div>
</div>
</body>
</html>
2

Hm, that example seems to do what you want in Chrome at least. What browser are you testing this in?

3

It works in Safari and Chrome. As Firefox can be squashed in more than Safari, it gives me the impression that the ul wouldn’t look good when viewed on a phone.

4

Mobile design is a bit more complex than that. By default on an iPhone, for example, if you don’t do anything specifically for mobile you will essentially get the desktop view (I tested it, and it appeared very small, with 4 columns). You need things like @media rules to change the display on a mobile device (or at least a smart phone).