-3

I'm using Bootstrap to build a webpage. The page looks as it should on desktops and laptops. However, when viewed on mobile phones, the bottom half of the page's content is cutoff. This happens only on mobile phones or windows resized smaller than 991px wide.

I tried sifting through the included Bootstrap CSS file but couldn't find any style rules dictating any behaviors like the one I describe.

I've attached two screenshots: Fig. 1 is the intended behavior--the content ends with the embedded contact form. Fig. 2 is the puzzling behavior--the page just ends in the middle of the pricing table.

The site is grillemasters.info

[Fig. 1] https://i.stack.imgur.com/uH7MB.png
[Fig. 2] https://i.stack.imgur.com/h2190.png

Sean Taylor
  • 25
  • 1
  • 9
  • 1
    It's tough to tell from your screenshots what's going on. It's not an apples-to-apples comparison. Posting your relevant code or creating a fiddle would be helpful. Also, read [this post](http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries) to learn about BS media queries. Sounds like you are hitting a breakpoint. – jmargolisvt Jun 07 '15 at 23:06

1 Answers1

0

Without seeing more information (e.g. try to post the minimum amount of HTML that still exhibits this error) it's hard to prescribe a solution. But here are three possible things to check out:

  • Mismatched (Incomplete) DOM If you have an open-element (e.g. <div>) without its close (</div>), HTML behaves in mysterious and often irreproducible ways. This often includes mis-styling all elements after the mismatch.
  • Bad Character or Incomplete File If you are uploading via FTP and the connection is interrupted, you may only be looking at a fragment of the file. Try deleting and re-uploading. The same thing would happen if the browser or FTP client encountered a character that made it stop reading the file — both of which might lead to a mismatched DOM.
  • Unnecessary body CSS Make sure you don't specify the height of body or html anywhere (or any other global, all-containing elements). The page should flow naturally, without you specifying a height: 100%.

[EDIT] I looked at your site (which redirects to http://www.supsean.com/grillemasters/, in case others are interested in debugging outside a frame). Look at the top of your page when you resize the screen to such a small size; there are quite pervasive CSS issues, likely caused by position: fixed or absolutes where they needn't be.

Try resolving that, and I suspect you'll stumble across the solution to this question as well.

j6m8
  • 2,261
  • 2
  • 26
  • 34