Question

I am creating a simple(ish) website for one of my iPhone apps using the Twitter Bootstrap project. I have created a full website with this and found it quite easy to use but I am having some issues media-grid.

I am trying to achieve a row of 3 images using the media-grid class. The images are 280px in width which gives me 840px in total. The container is 940px wide so I have 100px grace to use for padding etc. I am finding this extremely difficult to do as when i view the site it puts two images side by side then the third on the next row. Some anomalies are showing up though, which are;

• When I publish the index.html and associated css file via FTP the website displays the images with two side by side then the third image on the next row underneath the first.
• When I preview the website in ‘Coda’ (the editor on Mac I am using to write the html and css) the website looks exactly how I want it too with all 3 images side by side in one row.

I have tried a number of things;

1. I have tried editing the .media-grid styles in the CSS and it doesn’t seem to make a difference to how the site looks. Even if I had massive margins or padding it doesn’t alter for some reason?
2. I have tried putting my own id onto the media-grid class for the three images then styling then myself which also has no impact on the visuals.

I have used the following code to insert my images;

<div class="container">

  <ul class="media-grid" id="imagearray">
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>

Am I missing something in the CSS? I am not fluent with CSS so it is possible I am overlooking something? Any help would be appreciated.

Answer 1

To get the default styling to work correctly you need to wrap the <li>s with an <a href>.

e.g.

<ul class="media-grid" id="imagearray">
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
</ul>