CODEWITHSUNDEEP
htmlcssimage
ccc
ccc

Reputation: 467

Trouble with positioning images evenly inside container

One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.

I have two images which have this css code applied to them...

.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width : 1200px) {
.image-container {
    max-width: 500px;
}
}

.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width : 1200px) {
.image-container2 {
    max-width: 500px;
}
}

So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it? Any input if helpful thanks :)

http://imageshack.com/a/img912/981/MBjvwx.png

Upvotes: 0

Views: 71

Answers (1)

Gasim
Gasim

Reputation: 7991

Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:

.image-container {
    float: left;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-color: red; /* for testing */
    height: 250px;
}

@media only screen and (min-width : 1224px) {
    .image-container {
        max-width: 500px;
    }
}

Here is the result: http://codepen.io/gasim/pen/xbYQdd

Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.

EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.

EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:

.image-container {
   /* rest of the values */
   margin: 5px;
}

This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:

<div class="container">
   <div class="image-container" style="background-image: url(URL_HERE);"></div>
   <div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>

and add the styles:

 @media only screen and (min-width: 1224px) {
     .container {
        width: 80%;
        margin: 0 auto;
     }
 }

Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.

Upvotes: 1

Related Questions