1

I want to center an image on the screen only when it's on fullscreen. As of right now, every time I make my screen smaller in width the center image moves which messes up the entire page because I have positioned other surrounding images around it based on its starting location. How can I get this center image to stay in place when the browser gets smaller.

//This is the center image

     <div class="container">
        <div class="row">
            <div class="span4"></div>
            <div class="span4">         
                <div class="Button_FSG_Logo"></div>
            </div>
            <div class="span4"></div>
        </div>
     </div>

//This is the images surrounding it 

       <div class="button">
            <div class="button grow btnTech">
                <div class="tech border"></div>
            </div>
       </div>
       <div class="button">
         <div class="button grow btnFin">
            <div class="fin border"></div>
         </div>
       </div>

//This is the jQuery that positions the buttons location relative to the center image

  var position = $(".Button_FSG_Logo");
  var offset = position.offset();
  $(".btnTech").offset({ top: offset.top + 2, left: offset.left - 384 });
  $(".btnFin").offset({ top: offset.top + 126, left: offset.left - 384 });

//CSS

 .Button_FSG_Logo{
   margin: auto;
   margin-top: 270px;
 }

And all other buttons(images) have position: absolute; I am using bootstrap 3. I am looking for an answer along the lines of possible making bootstrap unresponsive, I think that maybe causing the center image to move once the browser gets smaller although I tried a couples of things and it did not work. Or could I possible set a set width and then center it within that width.

slime9
  • 11
  • 2
  • I think you need to use the fulscreen css class for that. https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen – Tasos Aug 13 '14 at 15:11
  • 3
    Look at this post: http://stackoverflow.com/questions/16755129/detect-fullscreen-mode Create a class for fullscreen, and a class for normal (not fullscreen) as default use the non fullscreen class, then with js remove the default class and add the fullscreen class when it goes into fullscreen mode, and vice versa – ctwheels Aug 13 '14 at 15:12
  • A JSfiddle would be helpful. I don't think the fullscreen API is necessary but I need to see what exactly you want to achive either my images or by a JSFiddle. – ProblemsOfSumit Oct 21 '14 at 14:21

0 Answers0