0

I'm very new to some of this, including getting the Boostrap grid down. I'm trying to create a responsive layout where the business graphic essentially slides to the left as you make the screen smaller so that by the time you are at a mobile size, the title, subtitle, login buttons and image are all stacked and centered, and the business graphic still looks like it's sitting on the grey line. For some reason, my image 'jumps up' when making my page smaller and I do not understand why. It should justslide along the grey line and scale down as needed..or that's at least what I am trying to make it do.

Here's a link to what I currently have: http://dev.blueeyesdesign.net/plm/homeimage.html

Any help is greatly appreciated!

user2654108
  • 365
  • 1
  • 4
  • 6

1 Answers1

1

It is "jumping" as it hits the thresholds of the columns. When you are using col-xs-# col-sm-# col-md-# etc all on the same row.

Those all stack at different points. Use the same col-[size] in the row if you want them all to stack at the same time.

http://getbootstrap.com/css/#grid-options

Edit: The higher the threshold the earlier the columns will stack.(ie: col-lg-# will stack first, col-xs-# will stack last)

Tony
  • 1,297
  • 10
  • 17
  • Thanks, I think I understand what you're saying. I cleaned it up a bit, now it just jumps when at the smallest mobile size. I think I need to do something different with the blue background image so that it too scales? – user2654108 Jan 30 '14 at 20:05
  • You can disabled the responsiveness if you don't want it. Check this out: http://stackoverflow.com/questions/17943264/how-to-use-twitter-bootstrap-3-for-non-responsive-site – Tony Jan 30 '14 at 21:33