Table has a few bugs

The table
has a few issues, I dont understand why the height of each row is 87px and not the height of the thumbnail. Also, why is the a tags not the full height of the (in the css isn’t the height supposed to be 100%?)

You set img{width:100px} so thus the height shrinks as well. It has no need to be wider than it is right now. You need to format your post to give us the other isssues. I can’t see what they are.

If I may insert…

.thumbnail is actually the anchor around the thumbnail image. .thumbnail {margin-bottom:20px} assures that it’s container, a <td>, will be at least 20px taller than the anchor. If you want the anchor to be closer to the height of the row of cells, you should override that bottom margin.

bootstrap.min.css (line5)

.thumbnail {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    line-height: 1.42857;
    margin-bottom: 20px;  /* do not delete me */
    padding: 4px; 
    transition: all 0.2s ease-in-out 0s;

Notice that the margin-bottom is in the bootstrap file which should not be changed, so you need to put the override on your local stylesheet something like this:
.thumbnail {margin-bottom:0;}
(The local stylesheet should follow the bootstrap stylesheets.)

The tall rows are missing their images. If you want rows with missing images to maintain the aspect ratio of the image, then you should include the native dimensions of the images in the HTML by including the width and height attributes. For example, it looks like width="945" height="519" should be added to the tag for the first image. Don’t forget the alt attribute, too.

<img src="/properties/1/slider5.jpg" width="945" height="519" alt="slider image">

Why are you asking users to download images that are 89 times larger than they need to be for the thumbnails? That eats up a lot of bandwidth and increases the page loading time for mobile tablet users. It would be kinder of you to create actual size thumbnails and thereby reduce the loading time of the page instead of wasting the user’s bandwidth loading full sized images that must then be scaled down in the users browser to be presented as thumbnails of properties in which they may have no interest.

1 Like

should I use this tutorial?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.