In my page I want it so that when you resize the page past the point of the pictures, that the pictures will go into another row, all the way so each picture has it's own row.
And then potentially I won't need any media queries. But unfortunaltely I can't find a way to center. I have tried everything I can think of, aside of making hundreds of media queries with different positioning. I can't make it a block because then it won't go into rows, I have tried margin: 0 auto;. I have tried changing the padding, I have even tried using the
html align="center". Nothing is working. Here is the website http://spencedesign.netau.net/singaporehome.
html Also I have a minor issue, sorry to croud this with two questions. But when it is in it's mobile state, there is no 10px padding at the bottom,
and the singapore title is on the left side rather than floating. Here is my code
<html>
<head>
<title> Singapore - Home </title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial scale=1.0">
<style>
*
{
margin: 0;
padding: 0;
}
body
{
background: url('woodbackground.jpg');
background-size: cover;
min-height: 100%;
min-width: 100%;
position: relative;
top: 0; bottom: 0; left: 0; right: 0;
}
#container
{
width: 90%;
margin: 0 auto;
}
h1
{
font: bold 65px Helvetica, Arial, Sans-serif;
text-align: center;
color: #eee;
position: relative;
top: 60px;
}
h3
{
font: 25px Helvetica, Arial, Sans-serif;
text-align: center;
color: #eee;
position: relative;
top: 80px;
}
ul#gallery
{
list-style: none;
display: inline;
margin: 0 auto;
position: relative;
top: 175px;
width: 1300px;
}
ul#gallery li a
{
float: left;
padding: 10px 10px 25px 10px;
background-color: #eee;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
position: relative;
margin: 10px;
text-decoration: none;
}
ul#gallery li a:hover
{
position: relative;
top: -15px;
}
ul#gallery li a img
{
height: 150px;
width: 250px;
max-width: 100%;
}
ul#gallery li a p
{
margin-top: 25px;
text-align: center;
color: #000;
font: Helvetica, Arial, Sans-serif;
text-decoration: none;
font-size: 20px;
}
@media screen
and (max-width: 640px)
{
ul#gallery
{
left: 2.2%;
width: 600px;
}
ul#gallery li a:hover
{
top: 0px;
}
}
</style>
<body>
<div id="container">
<h1> Singapore </h1>
<h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3>
<ul id="gallery">
<li><a href="#"> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li>
<li><a href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li>
<li><a href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li>
<li><a href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li>
</ul>
<br/>
</div><!-- Container -->
</body>
<html>
Thanks!
