Buttons inside div

Three problems:

  1. I need the green buttons to be inside the “yellow” div at the bottom (bottom: 0).
  2. When on smaller screens, how to keep the green buttons together, so zero margin-top-right-bottom-left.
  3. How to make the images inside the “yellow” div be responsive. Also, even though the height: 150 , an image 50x50 should just be 50x50 and not 50x150.

How to fix?

Here my fiddle… https://jsfiddle.net/roparos/jwn3g6o5/5/

Check this out,
https://jsfiddle.net/Sujith_S/dz5qgu4y/1/

  1. It is solved, i added this code on
.slider-nav {
  position: absolute;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
}
  1. When i resize after this edit the buttons look together
  2. As far as i understood your question, make an outer container for the img, give a fixed width to the outer container and give your image a 100% width, it will make your image responsive

@Sujith3021 - thanks, worked perfectly!