Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here.
My goal is to have the links adjust to align left based on the browser size, and also have the images resize accordingly. While I've managed to make it responsive to browser size changes, I'm struggling with centering the layout on mobile devices and certain browsers.
Below are the HTML/CSS snippets I am using for this task.
Thank you in advance for any assistance provided.
HTML:
<div class="home-page">
<ul class="tile">
<li id="one"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="two"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="three"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="four"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
CSS:
/* Home page Tiles
*/
/* styling for tiles */
.post-475 page type-page status-publish entry{
}
div.home-page{
margin: 0 auto;
padding: 0;
text-align:center;
}
.tile{
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
margin-top: 8px;
margin-left: -40px;
line-height: 1em;
padding-left: 10px;
}
/* individual tile */
.tile li{
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
line-height: 60px;
padding:0 10px;
}
/* Image within List (before clicking) */
.tile li img {
max-width: 22em;
width: 100%;
height: auto;
}