Thunbnails not aligning properly

  • Resolved riley454

    (@riley454)


    11 years ago

    I’m attempting to complete a product page of 3 column thumbnails using the following code however the second row indents slightly meaning the it only has 2 thumbs and the 3rd carries onto the third row(also indented)

    <ul class="thumbnails">
	<li class="span4">
<div class="thumbnail">
<div class="caption">
<h5 style="text-align: center;">Product detail</h5>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="text-align: center;"><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div></li>
	<li class="span4">
<div class="thumbnail">
<div class="caption">
<h5 style="text-align: center;">Product detail</h5>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="text-align: center;"><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div></li>
!SEQUENCE REPEATING FOR 6 THUMBS THEN...
</ul>

    I copied and butchered this code from another site and have tried a few variations but nothing fixes it so far. In the ‘visual’ view of editing it looks perfect but not on the desktop site version.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter riley454

    (@riley454)

    This is the page so you can see the results.

    carbonmonoxidesafety.net/wpress/?page_id=64

    The code for each thumb is copied from the first one and pasted for the required number, so there are no typos.

    rdellconsulting

    (@rdellconsulting)

    Try here

    ElectricFeet

    (@electricfeet)

    In a sentence: if you’re using span4s then you need to start a new row-fluid every 3 images.

    (If you were using span2s, you would need to start a new row-fluid every 6 images.)

    The new row-fluid resets all the margins etc so that the first span in the row lines up on the left.

    Thread Starter riley454

    (@riley454)

    Thats awesome! Thanks @rdell for the code example and thanks @ef for the explanation.

    I spent hours googling through example codes and each were slightly different without any explanation and wasn’t getting me anywhere.

    Great job guys problem solved!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Thunbnails not aligning properly’ is closed to new replies.