CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Jacopas
Jacopas

Reputation: 33

Change scroll behaviour on small screen

in my html page I would like to keep a big image on the left side of the screen and have a right-side column with actual page text which scrolls vertically, keeping the left-side image fixed position BUT when displayed in small screens (smatphones) the picture should be on top of the text and scroll as it would be part of the text. It seems I can get only either one of the two goals, someone can help me please?

My code

<div class="row">
  <div class="col-md-8 col-xs-12">
    <img src="somebigpicture.jpg" class="img-responsive" width=100% >
  </div>
  <div class="col-md-4 col-xs-12">
    <div style="height: 100%; overflow-y: scroll; text-align:center">
      page text here......
    </div>
  </div>
</div>

This works fine for desktops but on mobile the text scrolling behind the top picture. If I leave the "overflow-y:scroll" it works on mobile but not on desktops.

Upvotes: 3

Views: 3240

Answers (2)

Jmills
Jmills

Reputation: 2422

The bootstrap grid is based around a total width of 12 and both of your xs width are using 12, this is counter to how it is described for what should be contained within a .row:

  • Rows are horizontal groups of columns that ensure your columns are lined up properly.

  • Content should be placed within columns, and only columns may be immediate children of rows.

  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use .col-sm-4.

Upvotes: 0

Tha&#39;er AlAjlouni ثائر العجلوني
Tha&#39;er AlAjlouni ثائر العجلوني

Reputation: 15407

You can use media queries, media queries are only applied on specific conditions, such as a specific width.

For example the following overflow-y rule won't apply for screens wider than 480px:

@media screen and (max-width: 480px) {
  body {
    overflow-y: scroll;
  }
}

For more info about media queries see this w3schools page

Upvotes: 1

Related Questions