I am having trouble figuring out how to make the pictures on my page move into another row when the page is resized past their width. I want each picture to have its own row without needing media queries. However, I can't seem to center them no matter what I try. I've experimented with different positioning options and even tried using HTML align="center", but nothing seems to work. You can view the website here. Additionally, when the page is in mobile state, there is no 10px padding at the bottom and the title "Singapore" is not floating as intended. Below is my current 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>
If you have any suggestions or solutions, please let me know.