Results 1 to 1 of 1

Thread: How can I display one large image with two smaller images stacked?

  1. #1

    How can I display one large image with two smaller images stacked?

    It's hard to describe what I'm trying to do with a simple title. The best way is to show an example: http://www.microsoftstore.com/store/msusa/en_US/home
    I want to create one main image, with two smaller images to the left, but have the two smaller images one on top of another.
    I've figured it out how to do what I want with while on a large screen, but not in a responsive format.

    <div class="container">
    <div class="row">
    <div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-xs-12">
    <img src="021.JPG" class="img-responsive">
    <img src="022.JPG" class="img-responsive" id="picture-bottom">
    </div>
    <div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-xs-12">
    <img src="020.JPG" class="img-responsive">
    </div>
    </div>
    </div>

    This does what I need in the most basic way. It is not lined up though. I added a padding-top to the picture-bottom id and that lines everything up pretty well for the full sized display, but when I start to size it down the two side images stack without any space in between.

    *Edit*
    I've added a padding-bottom to the picture-bottom and that seems to fix part of the problem, but I really want to tighten the gap between the main image and the two side images.


    I'm not the most advanced with bootstrap so all advice is welcome.

    Thanks in advance!
    Last edited by hunterallen123; 11-18-2015 at 06:04 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •