Question

Photo of Don Smallman

0

Table design

3

What is the best way to include images on a page like this? https://www.therockaz.org/page/377?

I would like them to look like they do on our home page sub ad section.  Evenly spaced, flush left and right.  And I need them to look good on a mobile device.

This page looks OK on my computer, but I have had others say the alignment was off.  Plus it looks terrible on my phone, whereas our home page images like this flow very well on any device. 

Thanks!

  • Photo of Trey Hendon III

    1

    Hey Don,

    I'd recommend putting each image in it's own div and using classes in the div to set the columns.  I'd suggest trying:

    <div class="col-md-3 col-sm-6 announcement">
      <a href="your_url">
        <img src="your_picture" />
      </a>
    </div>

    Here's a Bootstrap explanation of the grid layout and how those classes work: http://getbootstrap.com/css/#grid-options

  • Photo of Don Smallman

    1

    I got it!  I added <div class="row announcement-list"> before the beginning of each row and it added the seperation.  I just don't know why :-)

    I that something that is built into the syste bootstrap for that class="row announcement-list" ????

    • Trey Hendon III

      Trey Hendon III

      It's not a Bootstrap thing, it's from the Rock stylesheets.


      .announcement-list .announcement {
      margin: 0 auto 30px;
      max-width: 390px;
      }

    • Photo of Don Smallman

      0

      Thanks Trey!  That worked great except that the bottom of the first row is touching the top of the second row of images.  I dont see anything on that bootstrap page that says how to add spacing.

      Plus, if you look, you will see that they are not flush on the left or the right.