John Doe John Doe - 4 months ago 5x
HTML Question

How do I make my website display a horizontal scrolling bar when it is minimized?

So I made a 'practice' website and haven't really grasped mobile optimization. Instead, I want to take a different approach which many websites do do. I want my site to display a horizontal scrolling bar on the bottom of the page if and ONLY if the site is minimized. All my element sizes are in percentage quantities and even all my divs has a style of 100% height and width. I also want all the elements to stay the same in position and none to shift around or disappear. For my case, whenever my site is minimized the following happens:

  • Everything (images, text, etc) shrinks to fit in the smaller screen size.

  • Some elements disappear while others overlay it. (For example, when there is a row with two 'col-md-6' columns from bootstrap, it looks all fine at normal size, but when minimized, one of the columns becomes enormous and the other column seizes to exist.

  • < br >s within text distort the flow of the paragraphs.

I have tried:

overflow-x: auto;
overflow-y: hidden;

as a style for body, html, and div(separately, not at once)
but that just disables the vertical scrolling and elements further down are not seen. And even then, the auto overflow-x thingy doesn't solve it

I have also tried:

min-width: 800px;

and that creates the horizontal scroll but still some elements are lost, and it seems the horizontal scroll is only long enough ONLY so that you can scroll to view the entire nav bar.


The site will be trying to adjust to a mobile viewport, you can prevent this by adding:

    <title>My Website</title>
    <meta name="viewport" content="user-scalable = no">

Or try

    <title>My Website</title>
    <meta name="viewport" content="initial-scale=1">

The problem is likely with your viewport tag.

You will also need to set a fixed width on the body.