My website has a "Featured" section with 3 equally sized elements displayed horizontally. I want to make the webpage responsive by using percentage widths, but when I resize the window to less than the list width, the items stack on top of each other.
I've experimented with adding max-width and adjusting widths to be either auto or 100%, but so far I haven't had any success.
I suspect that my approach might be wrong, as I have list items within anchor tags to make the entire item clickable.
Below is part of my code, with the full version available on the fiddle:
CSS:
.FeatureRow {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.FeatureRow li {
float: left;
width: auto;
margin: 10px;
background-image: -moz-linear-gradient(top, #fbfbfb, #ffffff);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#ffffff));
background-image: -webkit-linear-gradient(top, #fbfbfb, #ffffff);
background-image: -o-linear-gradient(top, #fbfbfb, #ffffff);
background-image: linear-gradient(to bottom, #fbfbfb, #ffffff);
background-repeat: repeat-x;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.FeatureRow a {
padding: 10px;
display: block;
width: 100%;
max-width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-color: transparent;
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
}
HTML:
<ul class="FeatureRow">
<li>
<a href="/contact/">
<h2 class="SpeechBg">Need some help?</h2>
<p>Feel free to get in contact with us</p>
</a>
</li>
<li>
<a href="/property/">
<h2 class="BinocularsBg">Country or City?</h2>
<p>You can always find a place, no matter where it is!</p>
</a>
</li>
<li>
<a href="/property/">
<h2 class="CameraBg">Now that's scenery!</h2>
<p>We guarantee that you will love the views from all of our unique locations</p>
</a>
</li>
</ul>