0

This is probably a really simple fix but has tied me up in knots for a couple of hours now... I was hoping someone may be able to help,

I just want to make the four images each have a width of 25% and fit 100% of the width of the page. However I get this white gap on the right of the images and can't get seem to get all four to fit across the page.

Any ideas at all? Thanks in advance.

CSS:

body {
    padding: 0px;
    margin: 0px;
}

.thumbar {}

.thumbnails {
    width: 25%;
    height: auto;
    background: white;
    min-width: 300px;
}

HTML:

<div class="thumbar">
    <img class="thumbnails " <img src="images/02.jpg">
    <img class="thumbnails " <img src="images/02.jpg">
    <img class="thumbnails " <img src="images/02.jpg">
    <img class="thumbnails " <img src="images/02.jpg">
    <img class="thumbnails " <img src="images/02.jpg">
</div>
James Taylor
  • 6,158
  • 8
  • 48
  • 74
willherby2003
  • 1
  • Possible duplicate - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements/5078297#5078297 – Paulie_D May 20 '15 at 14:04

2 Answers2

0

Firstly, it appears some of your HTML is malformed. This:

<img class= "thumbnails " <img src="images/02.jpg">

Should be:

<img class= "thumbnails" src="images/02.jpg" />

Since one image has to be defined using one img element.

Even though you did not show how this output is being displayed, the images are probably being stacked vertically. This is because images are block elements, not inline elements.

You can fix this by adding:

float: left;

to the thumbnails class or by making it display inline:

display: inline-block;

Hope this helps you!

Edit:

After playing around with the code for a bit, I've discovered that:

min-width: 300px;

is messing up the layout of the images at lower document widths. You should get rid of this property, or simply move it to the outer thumbar class.

Check out this JSFiddle.

Edit:

Now I see the confusion. What you're looking to do it create a media-query. The property you are looking for is max-width and it is defined, like so:

@media screen and (max-width : 320px) {
    .thumbnails {
        width: 100%;
        float: none;
    }
}

Check out this updated, responsive JSFiddle.

James Taylor
  • 6,158
  • 8
  • 48
  • 74
  • That did help a lot thank you the images now float in a row 4 across, however when i resize the browser (to a roughly portrait iphone size) the images dont seem to fill the width and have a gap to the right any more tips would be gratefully recieved. – willherby2003 May 20 '15 at 14:11
  • actually the same gap happens when there are two or three in the row as well... 4 fit perfectly now though! – willherby2003 May 20 '15 at 14:13
  • thanks again, so i tried removing the min width this seems to make all 4 scale and never drop down a line – willherby2003 May 20 '15 at 14:23
  • Is that desired behavior? – James Taylor May 20 '15 at 14:24
  • no i was hoping that as the browser window got smaller the boxes would always fit 100% width irespective of wether they were 1,2,3 or 4 across if that makes sense – willherby2003 May 20 '15 at 14:25
  • Perfect thanks james seems to be working now, i guess i just need to add more media queries and their relevant %'s to create the 2 and 3 columns? – willherby2003 May 20 '15 at 14:40
  • Yeah, that's correct. Feel free to accept and upvote this answer if it helped you! – James Taylor May 20 '15 at 14:47
0

What size images are you using? It's likely because the last image does not have enough room to fit the size of the screen. I don't see a float call in your style.

I would try using boot strap and surround everything in a container div.

And you'll want to set:

display: inline-block.

Check out Bootstrap as it offers responsive restyling particular for media items.

http://getbootstrap.com/components/#media

digwig
  • 154
  • 12