Member Avatar for MasterHacker110

I have this code:

<html>
<head>
    <title> Psycho Site - About Us </title>

    <style>
        /* container */
        div.container
        {
            width: 1574px;
        }
        /* end container */

        /* header */
        div.header
        {
            background-color: #DDA500;
        }

        h1.header_h1
        {
            margin-bottom: 0;
            font-size: 65;
        }
        /* end header*/

        /* menu */
        div.menu
        {
            background-color: #FFD700;
            width: 200px;
            float: right;
        }
        /* end menu */

        /* content */
        div.content
        {
            background-color: orange;
            height: 500px;
            width: 1374px;
            float: left;
        }
        /* end content */
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <center>
                <h1 class="header_h1"><i> Who are we? </i></h1>
            </center>
        </div> 

        <div class="menu">
            <a href="appointment.html">Appointment</a><br>
            <a href="emergancy.html">Need Help Emidiatly</a><br>
            <a href="homepage.html">Back To Home Page</a><br>
            <a href="">My Account</a>
        </div>

        <div class="content">
            We are a forum for teens, kids and parents or anyone that just want to speak their mind and/or need phsychological help </br>
            Mr. A Bouwer is our phsyc and he offer these services:
            <ul>
                <li>Work test</li>
                <li>Phsycho ...</li>
                <li>Talking</li>
            </ul>
            <center>
                <img src="counselling.gif" width="240" height="240"/>
            </center>
            Anyone can join out forums. When you join you get the ability to post on your onw wall, you can post any thing that is on your mind <br>
            as long as it complies to out forum rules found <a href="forumrules.html">HERE</a>
            If you do not wish to join but need a appointment click <a href="appointment.html">HERE</a>
            <br>
            <center>
                <img src="us.jpg" width="300" height="300"/>
            </center>
        </div>
    </div>
</body>
</html>

But the problem is that on smaller screens then mine it doesnt fit in properly. You have to scroll to the side (it is anoying) to see the other content. So how do I make it that it will fit on any screen without having to scroll to the side? Oh and I only want to use javascript and html.

Thanks...

  • 4 Contributors
  • 3 Replies
  • 300 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by crescendo

Dani AI

Generated

Your horizontal scroll is coming from fixed pixel sizing and some non‑responsive elements in the markup you posted. set large, absolute widths and even fixed image sizes, which forces the page wider than small viewports. The quick community hints from , and are on the right track — build a fluid layout, include the viewport meta, and let elements shrink or reflow. Below is a compact, modern pattern you can drop into the page to make it behave well on phones, tablets and desktops.

Put this meta in the head, then use a fluid container + flex layout and make images scale:

<!-- in <head> -->
<meta name="viewport" content="width=device-width,initial-scale=1">

/* basic responsive rules */
.page { max-width:1200px; margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.header { background:#DDA500; text-align:center; padding:0.75rem; }
.layout { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.main { flex:1 1 60%; min-width:280px; background:orange; padding:1rem; }
.sidebar { flex:0 0 220px; min-width:150px; background:#FFD700; padding:1rem; }
img { max-width:100%; height:auto; display:block; }

If you must use JavaScript only (not recommended), adapt sizes on resize — it works but is less robust and hurts accessibility. Example fallback:

<script>
function adapt(){
  var w = window.innerWidth;
  var main = document.querySelector('.main');
  var side = document.querySelector('.sidebar');
  if(!main||!side) return;
  if(w < 600){
    main.style.width = '100%'; side.style.width = '100%'; side.style.order = '2';
  } else {
    main.style.width = ''; side.style.width = '220px'; side.style.order = '';
  }
}
window.addEventListener('resize', adapt);
window.addEventListener('load', adapt);
</script>

Troubleshooting tips: remove fixed width/height attributes on images or override them with img { max-width:100% }; ensure font-size:65 has units (e.g. 65px); avoid deprecated <center>; use the browser inspector to find the element causing overflow. The CSS route (flex/grid + media queries) is more future‑proof than a JS resize hack.

Recommended Answers

All 3 Replies

Member Avatar for mrvijayakumar

Instead of setting width, height in pixels / em in CSS. Better use percentage.

Member Avatar for pritaeas

Have a look at CSS media queries.

Member Avatar for crescendo

You'll have to make the site responsive for that

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.