Change position of Images HTML when Window changes

Question

This is probably much easier than I'm making it sound.

Basically I have 6 Images, each with a button underneath... This is what it looks like:

I just place them like this:

<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">

It looks great on a typical browser window. But when I make the window narrower, it goes like this:

Which makes sense give how I list my images/buttons.

But I want them to look like this when the window is narrowed:

What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?

Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.

A push in the right direction would be amazing.

I did look HERE on Stackoverflow, but it's far more complex as only works with squares.

I look forward to your help :D

UPDATE

https://jsfiddle.net/du6Lu4ge/

looks like this:

when resized, looks like this:

:(

Couldn't you group each red and corresponding blue div in one parent div? So that when the page shrinks, they collapse beneath eachother as a pair instead of independently? — Tyler Roper, Oct 18 '16 at 16:41
That sounds exactly how I would like it, but I'm not sure how to implement it :( Thanks for commenting :) — Reanimation, Oct 18 '16 at 16:42
Can you post your relevant CSS and HTML, or make a [JSFiddle](http://www.jsfiddle.net)? — Tyler Roper, Oct 18 '16 at 16:42
Just use flexbox - http://www.sketchingwithcss.com/samplechapter/cheatsheet.html — Luís P. A., Oct 18 '16 at 16:43
Updated :) Sorry it's basic. The rest is just a header and footer. This all happens in the body. Thank you. — Reanimation, Oct 18 '16 at 16:49
@Reanimation What about something along the lines of [this](https://jsfiddle.net/du6Lu4ge/2/)? — Tyler Roper, Oct 18 '16 at 16:51
@Santi That's perfect. EXACTLY what I'm looking for. Will it work if everything kept central? — Reanimation, Oct 18 '16 at 16:53

score 1 · Accepted Answer · answered Oct 18 '16 at 16:55

1

I would do something like this:

https://jsfiddle.net/du6Lu4ge/3/

Hope it helps you out!

What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block

answered Oct 18 '16 at 16:55

Alejo Anibal

361
2
8

Credit to both you and @Santi. Thank you so much for posting. Absolutely perfect. :) Thank you so much. – Reanimation Oct 18 '16 at 17:04

score 1 · Answer 2 · answered Oct 18 '16 at 17:26

this example is working full responsive, you can simply edit the css and add viewports.

html:

<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>

css:

.imageContainer {
  width: 400px;
  display: inline-block; 
}

.imageContainer .imageBlock {
   display: inline-block;    
}

.imageContainer .imageBlock .image {
  display: inline-block;
  width: 400px;
  height: 300px;
  background-color: darkred;  
}

.imageContainer .buttonBlock {
  display: inline-block;
  text-align: center;
}

.imageContainer .buttonBlock .button {
  display: inline-block;
  width: 300px;
  margin: 10px 50px; /* simple way to center it */
  height: 100px;
  background-color: cyan;
}

you can test it on https://jsfiddle.net/q10fbesm/

edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;

Change position of Images HTML when Window changes

2 Answers2