I have a Gallery view where i use UL LI element with float left to make it sit like a gallery in as many lines a needed based on the content. After the first line it seems to go hay wire as shown below. Looks like the problem is in Firefox on both MAC/Win7
Link: http://archangle.mink7.com/portfolios (footer Gallery)
<ul class="gallery">
<li> <img alt="video" src="/img/portfolios/video.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Concept Gallery" src="/img/portfolios/concept.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </li>
</ul>
CSS:
.gallery {
list-style: none outside none;
margin: 0;
padding: 0;
}
.gallery li {
float: left;
width: 33%;
}
.comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item {
display: block;
position: relative;
}
The heights are inconsitenet in FireFox and therefore you are getting an orphan in that last row. Try adding this to your gallery li's:
.gallery li {
float: left;
width: 33%;
height:100px;
overflow:hidden;
}
This will force consistent height on your image containers (li's) and cut off any excess image height.
Related
I have a problem with displaying this(check this picture)
I have a link on the left and icons with words under it on the right. What is the right way to display it? and how can I display the words under the icons? I need help with it. Please check the attached picture to see how I need it to look.
<div class="back-to-listing-clinic">
<div>
<a> < back </a>
</div>
<div class="right-icons-part">
<img class="clinic-top-icons"src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
</div>
<div>
<p> Icon1 </p>
<p> Icon2 </p>
<p> Icon3 </p>
</div>
</div>
There's a dozen ways to do this. I replaced your images with icons for demonstration purposes.
This method just sets the "left and right" parts to display: inline-block to place them next to each other, and then sets float: right on the right hand ones to separate them.
I'd consider using a CSS Framework of some kind instead - but this would be a simple way to do it with what you have.
No Framework:
* {
box-sizing: border-box;
}
.back-to-listing-clinic > div {
display: inline-block;
}
.right-icons-part {
float: right;
}
.right-icons-part:after {
content: " ";
display: block;
clear: both;
height: 0px;
}
.right-icons-part a {
text-align: center;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="back-to-listing-clinic">
<div class="left">
<a> < back </a>
</div>
<div class="right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>
Super simple Ungrid framework
#media (min-width: 30em) {
.row { width: 100%; display: table; table-layout: fixed; }
.col { display: table-cell; }
}
.right {
text-align: right;
}
.right-icons-part a {
display: inline-block;
text-align: center;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="row back-to-listing-clinic">
<div class="col left">
<a> < back </a>
</div>
<div class="col right right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>
I have a "ul" element inside inside a "div" element for which the HTML is as follows:
<ul id = "list" class='nav nav-pills'>
<li class='active'>
<a style="width:330px; height:50px; text-align: center;" data-filter=".portfolio-filter-photography" href="#">
<strong>
First
</strong>
</a>
</li>
<li >
<a style="width:330px; height:50px;" data-filter=".portfolio-filter-identity" href="#">
<strong>
Second
</strong>
</a>
</li>
<li >
<a style="width:100px; height:50px; text-align: center; vertical-align: middle;" data-filter=".portfolio-filter-faqs" href="#">
<strong style="vertical-align: -webkit-baseline-middle;">
Third
</strong>
</a>
</li>
</ul>
The desktop view with this HTML is as shown in image1
while the mobile view is in image2
The alignments I have are correct for Desktop view while I want these elements to be aligned vertically at the center of the screen in a mobile screen. How do I do that? I am new to CSS and don't exactly understand what should be done. I tried putting "vertical-align: center", but doesn't work.
Kindly help!
You can do it with Flexbox and #media queries:
* {margin: 0; padding: 0; box-sizing: border-box}
#list {display: flex} /* displays flex-items (children) inline */
#list > li {
flex: 1; /* each takes 33.33% of the parent's width; adjust to your needs */
display: flex;
justify-content: center; /* centers them horizontally (instead of text-align: center) */
align-items: center; /* and vertically */
height: 50px;
}
#media (max-width: 568px) {
#list {flex-direction: column} /* stacks them vertically */
}
<div class="row">
<div class="col-md-12 col-sm-12">
<ul id="list" class='nav nav-pills'>
<li class='active'>
<a data-filter=".portfolio-filter-photography" href="#">
<strong>First</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-identity" href="#">
<strong>Second</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-faqs" href="#">
<strong>Third</strong>
</a>
</li>
</ul>
</div>
</div>
I have a web page and I am trying to use a bootstrap carousel. On the first slide there are 3 pictures and on the other slide there is a youtube video embedded to it. The page looks problematic on smaller resolutions.
Here is a how pictures look like on laptop:
pictures on laptop
Here is how youtube video looks like on laptop:
video on laptop
Here is how pictures look like on smaller resolution:
pictures on 320x480
Here is video on smaller resolution:
video on 320x480
Here is video on 360x640:
video on 360x640
Is there a way to make pictures on carousel display on the center when it is smaller resoultion? And of course for the youtube video as well. The video is not on the center and exceeds the screen.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row item active">
<div class="bannerImage">
<a href="#"><img src="images/waspmote_pro_t.png" alt="">
</a>
<a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
</a>
<a href="#"><img src="images/u13_gw_t.png" alt="">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Ultra low power (0.7uA)</li>
<li><i class="fa fa-check-circle"></i> 100+ Sensors available</li>
<li><i class="fa fa-check-circle"></i> Over the Air Programming (OTA)</li>
<li><i class="fa fa-check-circle"></i> Encryption Libraries (AES, RSA)</li>
<li><i class="fa fa-check-circle"></i> Encapsulated line available</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Industrial Protocolos: RS-232,RS-485,Modbus,CAN Bus, 4-20mA</li>
<li><i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide1 -->
<div class="row item">
<div class="bannerImage">
<a href="#"><img src="images/waspmoteps01.png" alt="">
</a>
<a href="#"><img src="images/waspmoteps02.png" alt="">
</a>
<a href="#"><img src="images/waspmote03.png" alt="" class="righter">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-bolt"></i> Easy and fast deployment</li>
<li><i class="fa fa-money"></i> Minimum maintenance costs</li>
<li><i class="fa fa-exchange"></i> Services/network scalability</li>
<li><i class="fa fa-cloud"></i> Any Cloud platform compatible</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Integrating more than 80 sensors</li>
<li><i class="fa fa-check-circle"></i> Robust waterproof IP65 enclosure</li>
<li><i class="fa fa-check-circle"></i> Add/change sensor probe in seconds</li>
<li><i class="fa fa-check-circle"></i> Solar powered internal and external panel</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Over the air programming (OTAP)</li>
<li><i class="fa fa-check-circle"></i> Graphical/intuitive programming interface</li>
<li class="space"><i class="fa fa-check-circle"></i> ZigBee, 802.15.4, 868, 900, LoRaWAN, LoRa, Sigfox, WiFi, 3G/GPRS and Bluetooth Low Energy</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide2 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="270" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>The new Waspmote Plug & Sense! line allows developers to forget about electronics and focus on services and applications. Now you can deploy wireless sensor networks in a easy and scalable way ensuring minimum maintenance costs. The new platform consists of a robust waterproof enclosure with specific external sockets to connect the sensors, the solar panel, the antenna and even the USB cable in order to reprogram the node. It has been specially designed to be scalable, easy to deploy and maintain.</p>
</div>
</div>
</div>
</div>
<!-- /Slide3 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="284" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Events Sensor Board</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>More than 50 available sensors for the Waspmote platform. Values from the temperature, humidity, tilt, vibration, water, PIR, bend sensors integrated in the Events Sensor Board are sent using the 802.15.4/ZigBee radio.</p>
</div>
</div>
</div>
</div>
<!-- /Slide4 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div>
<!-- /.control-box -->
</div>
<!-- /#myCarousel -->
</div>
<!-- /.span12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
CSS
div {
word-break: break-all;
}
img {
max-width: 100%;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 8 */
filter: alpha(opacity=50);
/* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #fbf4e0;
margin: 40px auto 10px;
padding: 20px 0px;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #000;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 10px 0px;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.caption .span4,
.caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #000;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
font-weight:bold;
}
.caption p {
font-size: 1rem;
line-height: 1rem;
color: #000;
}
.caption ul{
color: #000;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer,
.footer a {
color: #fff;
}
p.right {
float: right;
}
::selection {
background: #ff5e99;
color: #FFFFFF;
text-shadow: 0;
}
::-moz-selection {
background: #ff5e99;
color: #FFFFFF;
}
a,
a:focus,
a:active,
a:hover,
object,
embed {
outline: none;
}
:-moz-any-link:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
.bannerImage img {
margin-left: 10%;
}
.bannerImage iframe{
margin-left: 25%;
margin-right: 25%;
}
.waspmote{
font-size:13px;
}
.waspmoteps{
font-size:13px;
}
.space{
margin-bottom:34px;
}
.righter{
margin-left:18% !important;
}
edit 1: Here is what happened after media screen addedtexts under pictures are not display on the screen.
media screen
edit 2: Actually this markup works for pictures in the slide but still texts under the pictures are not visible in smaller resolutions.
<div class="bannerImage">
<div class="row productsRow">
<div class="col-md-4">
<img src="images/waspmoteps01.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmoteps02.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmote03.png" alt="" class="righter">
</div>
</div>
</div>
CSS:
.productsRow {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
Edit 3: JSFiddle added:
JSFIDDLE
EdiT 4: After removing the height, the videos are not centered.
enter link description here
EdiT 5: Changing the iframe CSS worked for small resolutions. But for 768x1024 and 800x1280 portrait resolutions texts under pictures exceeds the screen.
part1: 768x1024_part1
part2: 768x1024_part2
Edit 6: The PC/Laptop resolution breaks.
sample
EdiT 7: Carousel starts on the main page automatically on IE 11 but supposed to be sliding on the active page!? Any ideas?
Here is the Jquery:
// Carousel Auto-Cycle
$(document).ready(function () {
$('.carousel').carousel({
interval: 6000
})
});
The solution is not perfect, but I hope it also helps you.
For your container .bannerImage I defined width:100%; than you can achieve the
responsiveness of your website.
#media queries: To set the size of the images to 100%, if the screen resolution is lower than 1024px.
CSS
.bannerImage img {
width: 25%;
}
.bannerImage{
padding-left: 15%;
padding-right: 15%;
width: 100%;
height: auto;
}
.bannerImage iframe{
width: 100%;
}
#media screen and (max-width: 1024px){
.bannerImage img {
width: 100%;
}
}
jsfiddle
EDIT 1
Remove the height: 140px; on line 1430, after than your text will be shown in full height.
EDIT 2 UPDATE
So there was still an issue with the iframe pic, but this should fix it:
CSS
.bannerImage iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:80%;
height:100%;
}
.iframeImage{
position:relative;
padding-bottom:44.25%;
height:0;
left: -15%; //for centering the iframe
}
HTML
<div class="bannerImage iframeImage">
...
</div>
Have you tried img-responsive class for images and embed-responsive class for video content? these are classes for responsive media content
Check this for images and this for video content
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
I'm creating a web page that shows pictures of cute dogs. For every dog, I want to show the name of the dog and then a picture below it.
I would like the images to be shown side by side, but they are shown stacked vertically.
Here is my fiddle
http://jsfiddle.net/53bnhscm/2/
Here is my HTML
<h1>Listing dogs</h1>
<ul>
<li> Dog 1 </li></br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li> Dog 2 </li></br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Here is my CSS
li {
list-style: none;
display: inline;
}
I thought a break statement after every list item and a display:inline property would do the trick, but I guess not.
Another solution is to use display: table-cell to ul elements:
ul {
display: table-cell;
}
li {
list-style-type: none;
}
<h1>Listing dogs</h1>
<ul>
<li>Dog 1</li>
</br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li>Dog 2</li>
</br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Your lis are contained within their own ul so you need to inline that instead.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
FIDDLE
Also li tags are more for list items so this isn't a real efficient way of doing this. Plus its a lot of extra code. You could simply wrap your sections in a container and inline that:
HTML
<h1>Listing dogs</h1>
<div class="wrapper">
Dog 1
<a href="/dogs/2">
<img alt="Dog 1" src="..." />
</a>
</div>
<div class="wrapper">
Dog 2
<a href="/dogs/3">
<img alt="Dog 2" src="..." />
</a>
</div>
CSS
.wrapper{
display: inline-block;
}
.wrapper a{
display: block;
}
EXAMPLE
Here a fiddle. Your markup is messy by the way, I recommend to use HTML5 markup <figure> so you can easily add a <figcaption>: http://jsfiddle.net/53bnhscm/7/
<h1>Listing dogs</h1>
<figure>
<figcaption>Dog 1</figcaption>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</figure>
<figure>
<figcaption>Dog2</figcaption>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</figure>
CSS
figure {
float:left;
display:inline-block;
}
ul > li {
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}
And I think may be you are looking something like this. In that case you have to edit your html code
http://jsfiddle.net/ahmadsharif/p0cbmy2h/
The following answer is correct for your markup.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
But if you mean exactly what is written in your question then one thing that I need to mention and it is “You should take care of your HTML markup.”
<ul>
<li>
<a href="/dogs/2">
<b>Dog 1</b>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
<li>
<a href="/dogs/3">
<b>Dog 2</b>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
and then your CSS will be:
ul li{
display: inline-block;
}
ul li a b{
display: block;
text-align: center;
margin-bottom: 5px
}
Just use UIKIT and its grid system. This way they will stack automatically on phones.
http://getuikit.com/docs/grid.html
<div class="uk-grid">
<div class="uk-width-1-2">Your Image HERE</div>
<div class="uk-width-1-2">Another Image Here</div>
</div>