Well as already stated, there are many possible reasons. But I've recently been bringing some of my "legacy" sites into the "modern" age of responsive design, and here are two of the biggest things I've needed to do. First, there is an important meta tag you need in the <head> area...
<meta name="viewport" content="width=device-width,initial-scale=1"/>
This tells mobile browsers to try to fit everything onto the mobile screen and fill it as much as possible. However, most people do this meta this not realizing that if you don't make the rest of your page and page elements fully responsive, you may end up with a worse situation (like what you described. So some of the obvious things are...
- Are you using responsive text in your CSS (for example, text sizes in REMs rather than ems, pixels, or ems).
- Are all your box widths specified in percentages rather than pixels or units that can't change with the page.
- Are all your image sizes responsive! No HTML widths or heights! All images controlled by CSS, with widths specified as percentage and heights set to 'auto'. Also, consider 'float' left or right.
I could go one... for example in you BODY CSS...
-webkit-text-size-adjust: 100%; /* **see below */
Thosehelp many mobile browsers maintain text size during orientation changes, (see http://www.saintsatplay.com/blog/2015-04-25-preventing-text-scaling-on-iphone-landscape-orientation-change ). It may not be your current problem, but it could save you some headaches trying to handle all that with media queries (which you'll need sooner or later too)
Good luck! There have been times, while rebuilding pages with problems like yours on mobile devices, where I had to start a new page, adding in one element or block of content at a time and testing until the "problem child" revealed itself.