0

I have been using the code from this post to place two images (fbook icon and a banner) on top of a main poster image. This is how the code looks like in my bootstrap index file:

   <div class="container">
      <div class="row">

         <div class="col-sm-4">

         </div>

         <div class="col-xs-12 col-sm-4">

            <div style="position: relative; left: 0; top: 0;">
              <img class="poster center-block" src="images/poster.png" style="position: relative;"/>
               <a href="https://www.facebook.com/" target="_blank">
                  <img class="fbook" alt="Facebook!" src="images/fbook.png"/>
               </a>
               <a href="http://www.yo.com/" target="_blank">
                  <img class="banner" alt="Yo!" src="images/banner.png"/>
               </a>
            </div>

         </div>

         <div class="col-sm-4">

         </div>

      </div>
 </div>

This is the current css:

img.poster {
    position: relative; 
    padding-top: 5px;
    max-width: 250px;
}

img.fbook {
    padding-top: 25px;
    max-width: 65px;
    position: absolute;       

    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
}

img.banner {
    padding-top: 25px;
    max-width: 235px;

    position: absolute;       
}

The two images stays in place until the columns collaps at about .col-sm-/768px. From 768px and down, the two images will use the col-xs-12 border to align, and they are placed to far left of the main poster image. The main poster image is centered in the middle of the col-xs-12 width the center-block class.

It seems like the col-sm-4 will align just around the main poster image, so that the other two images on top uses this column border in order to align themselves. When the clumn collapses to col-xs-12 the left clomun border will be placed futher to the left.

When using col-xs-4 the same thing happend..

I would like a to find a way to place the two images on top of the main poster image, so that they will stay in place when the window is resized and the columns collapses.

UPDATE - SOLUTION:

css:

.columnWidth {
    width: 33.33333333%;
    margin-left: 5%;

}

html:

<div class="col-sx-12 col-sm-4 columnWidth">
R0LL
  • 73
  • 10
  • Can you provide a mockup of some kind for how it's supposed to look, or even a mockup on JSFiddle or Bootply? Rather hard to get an idea of what you're trying to achieve simply from your writeup. – MattD Feb 18 '15 at 18:11
  • Of course, her is the code I got in bootply: http://www.bootply.com/7IJ4s4Ssha I would like the two small images at the bottom to be placed on top of the big 350x539 image.. even when the site is resized! – R0LL Feb 18 '15 at 18:52
  • On top as in above it, or on top as in layered on top of the larger image? – MattD Feb 18 '15 at 18:55
  • the last - as in layered! – R0LL Feb 18 '15 at 19:12
  • Yeah, you're not really going to be able to do this with Bootstrap as far as I can tell. The grid allows you to next columns inside of colums, but it's not intended to layer stuff on top of other stuff. – MattD Feb 18 '15 at 19:19
  • So to somehow make a div that will only fit the main poster image, and use this to align the two other images will not be an option? – R0LL Feb 19 '15 at 07:15
  • Not with Bootstrap anyway. – MattD Feb 19 '15 at 13:06
  • I actually made it I changed the column width to 33% for < 768px - the same as >768px. Now I am able to get the same placement for the two images as for the desktop.. – R0LL Feb 19 '15 at 13:49
  • If you got it to work, post it as the answer then accept it when you can. Could be of use to others going forward, and I'd like to see it myself. – MattD Feb 19 '15 at 13:52

0 Answers0