我的网站在 760px 处中断。 我该如何解决？

Question

 window.onload = function(){ const pattern = trianglify({ width: window.innerWidth, height: window.innerHeight, cellSize: 75, xColors: 'Blues', yColors: 'match', variance: 0.75, fill: true, }) document.getElementById('background').appendChild(pattern.toCanvas()) /* Customization width: 600, height: 400, cellSize: 75, variance: 0.75, seed: null, xColors: 'random', yColors: 'match', fill: true, palette: trianglify.colorbrewer, colorSpace: 'lab', colorFunction: trianglify.colorFunctions.interpolateLinear(0.5), strokeWidth: 0, points: null } */ let ageInput = document.querySelector('#ageInput'); let heightInput = document.querySelector('#heightInput'); let weightInput = document.querySelector('#weightInput'); let extremeWeightGain = document.getElementById('extremeWeightGain') let averageWeightGain = document.getElementById('averageWeightGain') let mildWeightGain = document.getElementById('mildWeightGain') let mildWeightLoss = document.getElementById('mildWeightLoss') let averageWeightLoss = document.getElementById('averageWeightLoss') let extremeWeightLoss = document.getElementById('extremeWeightLoss') let btnAdd = document.querySelector('button'); let maintainCalories = document.getElementById('maintainCalories'); const selectElement = document.getElementById('exerciseInput') let exerciseValue = { price: 0 } selectElement.addEventListener("change", function(e) { const inputValue = e.target.value; if (inputValue == 'noExercise') { exerciseValue.price = -150; } if (inputValue == 'lightExercise') { exerciseValue.price = -50; } if (inputValue == 'moderateExercise') { exerciseValue.price = 100; } if (inputValue == 'activeExercise') { exerciseValue.price = 250; } if (inputValue == 'veryActiveExercise') { exerciseValue.price = 375; } if (inputValue == 'extraActiveExercise') { exerciseValue.price = 500; } }) btnAdd.addEventListener('click', () =>{ let zyzz = parseFloat(weightInput.value*10) + parseFloat(heightInput.value*6.25) - parseFloat(ageInput.value*5) + parseInt(genderValue.price) + parseInt(exerciseValue.price); maintainCalories.innerText = zyzz.toFixed(0); extremeWeightGain.innerText = zyzz *100 /71; averageWeightGain.innerText = zyzz *100 /81; mildWeightGain.innerText = zyzz *100 /89; mildWeightLoss.innerText = zyzz *88 /100; averageWeightLoss.innerText = zyzz *76 /100; extremeWeightLoss.innerText = zyzz *66 /100; extremeWeightGain.innerHTML = Math.round(extremeWeightGain.innerHTML *1); averageWeightGain.innerHTML = Math.round(averageWeightGain.innerHTML *1); mildWeightGain.innerHTML = Math.round(mildWeightGain.innerHTML *1); mildWeightLoss.innerHTML = Math.round(mildWeightLoss.innerHTML *1); averageWeightLoss.innerHTML = Math.round(averageWeightLoss.innerHTML *1); extremeWeightLoss.innerHTML = Math.round(extremeWeightLoss.innerHTML *1); }); var genderValue = { price: 0 } var maleValue = document.getElementById('Male'); Male.addEventListener('click',function(){ genderValue.price = 5; }) var femaleValue = document.getElementById('Female'); Female.addEventListener('click',function(){ genderValue.price = -161; }) } function showResults() { document.getElementById("input1").style.display="none"; document.getElementById("input2").style.display="none"; document.getElementById("input3").style.display="none"; document.getElementById("input4").style.display="none"; document.getElementById("input5").style.display="none"; document.getElementById("input6").style.display="none"; document.getElementById('hideButton').style.display = "none"; document.getElementById("resultsSection").style.display="block"; }

 .main-section { padding-top: 79px; padding-left: 500px; width: 903px; font-family: 'Anton', sans-serif; display: block;}.background { position: sticky; overflow: hidden;}.wholeArea { position: absolute; top: 0; right: 0;}.title { font-size: 60px; color: #132c54;}.description { font-size: 25px; color: #2569c8; line-height: 29px; margin-bottom: 8px;}.inputText { font-size: 30px; color: #132c54; background-color: white;}.inputField { font-size: 30px; color: #132c54; border-color: #132c54; border-width: 4px; border-style: solid; outline-color: #132c54; border-radius: 6px;}.noDecoration { /* No Text Decoration */ text-decoration: none; color: #132c54;}.selectInput { width: 413px; color: #132c54; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px;}.textInput { width: 400px; display: inline; color: #132c54; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px; padding-left: 3px;}.selectOption { font-size: 30px; color: #132c54;}.buttonStyle { font-size: 35px; color: #132c54; background-color: white; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px;}.radioStyle { width: 20px; height: 20px; display: inline-block; vertical-align: top;}.leftColumnBox { position: absolute; margin-right: 100px; width: auto; height: auto;}.leftColumnBox2 { position: absolute; margin-top: 321px; margin-right: 100px; width: auto; height: auto;}.rightColumnBox { position: absolute; margin-right: 100px; width: auto; height: auto;}.rightColumnBox2 { position: absolute; margin-top: 321px; margin-right: 100px; width: auto; height: auto;}.leftColumn { width: auto; height: auto; margin-top: 81px; margin-left: 100px; margin-right: 100px; float: left; position: fixed; display: inline; top: 0px; left: 0px;}.rightColumn { width: auto; height: auto; margin-top: 81px; margin-left: 100px; margin-right: 400px; float: left; position: fixed; display: inline; top: 0px; right: 0px;}.advertImage { border: 10px white solid; border-radius: 6px; width: 300px; height: auto;}.resultsSection { display: none;}.radioArea { height: 45px; width: 700px; display: block;}.inputArea { height: 50px; width: 700px; display: block;}.labelText { width: 150px; display: inline-block;}.resultsText { line-height: 40px; padding: 0px; border: 0px; margin: 0px;}.hideInput { display: block;}.mainBorder { border: 20px solid white; border-radius: 12px; background-color: white;}.titleBorder { border: 20px solid white; border-bottom: none; border-top-left-radius: 12px; border-top-right-radius: 12px; background-color: white;}.descBorder { border: 20px solid white; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background-color: white;} a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } @media screen and (max-width: 780px) {.main-section { padding-top: 64px; padding-left: 10%; padding-right: 0px; width: 80%; }.leftColumn { width: 240px; height: auto; margin-top: 41px; margin-left: 85px; margin-right: 30px; float: left; position: static; display: block; width: 30%; }.rightColumn { width: 240px; height: auto; margin-top: 41px; margin-left: 70px; margin-right: 0px; float: left; position: fixed; position: static; display: block; width: 30%; }.advertImage { border: 10px white solid; border-radius: 6px; width: 240px; height: auto; }.leftColumnBox2 { display: none; }.rightColumnBox2 { display: none; }.textInput { width: 350px; }.selectInput { width: 363px; }.title { font-size: 40px; }.description { font-size: 18px; }.labelText { width: 150px; }} @media screen and (max-width: 760px) {.main-section { padding-top: 64px; padding-left: 11%; padding-right: 0px; width: 80%; }.leftColumn { width: 240px; height: auto; margin-top: 41px; margin-left: 88px; margin-right: 30px; float: left; position: static; display: block; width: 30%; }.rightColumn { width: 240px; height: auto; margin-top: 41px; margin-left: 70px; margin-right: 0px; float: left; position: fixed; position: static; display: block; width: 30%; }.advertImage { border: 10px white solid; border-radius: 6px; width: 240px; height: auto; }.leftColumnBox2 { display: none; }.rightColumnBox2 { display: none; }.textInput { width: 350px; }.selectInput { width: 363px; }.title { font-size: 40px; }.description { font-size: 18px; }.labelText { width: 150px; }}.banner { /* Banner Styles */ width: 100%; color: black; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 24px; float: left; text-decoration: none; cursor: pointer;} html, body { max-width: 100%; overflow-x: hidden;}.noselect { /* No Highlighting */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Inte.net Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */}.banner-head-1 { /* Home Header */ float: left; overflow-wrap: normal; margin-left: 200px; margin-right: 200px; text-decoration: none; color: black; display:block;}.banner-head-2 { /* Food Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-3 { /* Exercise Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-4 { /* Calculators Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-5 { /* Calculators Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.dropdown { /* Dropdown Content */ cursor: pointer; color: black; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 24px; display:none; position:absolute; width: 100%; float: left; text-decoration: none; padding-right: 80px; margin: 0px; border: 0px;}.noDecoration { /* No Text Decoration */ text-decoration: none; color: black;}.dropdown-content { display: none; padding-left: 20px;}.banner-logo { height: 40px; border: 10px solid white; border-radius: 12px; margin-top: 5px;}.banner-logo-responsive { margin-left: 150px; height: 43px; margin-top: 5px; margin-bottom: 5px; border: 10px solid white; border-radius: 12px; margin-left: 350px;}.mobile-logo { height: 80px; padding: none; border: 10px white solid; border-radius: 8px;} @media screen and (max-width: 780px) {.banner-head-1 { /* Home Header */ margin-left: 6px; margin-right: 10px; }.banner-head-2 { /* Food Header */ margin-left: 15px; }.banner-head-3 { /* Exercise Header */ margin-left: 15px; }.banner-head-4 { /* Calculators Header */ margin-left: 15px; }.banner-head-5 { /* Calculators Header */ margin-left: 15px; }.banner-logo { height: 22px; }} @media screen and (max-width: 760px) {.banner-head-1 { /* Home Header */ margin-left: 10px; margin-right: 10px; }.banner-head-2 { /* Food Header */ margin-left: 15px; }.banner-head-3 { /* Exercise Header */ margin-left: 15px; }.banner-head-4 { /* Calculators Header */ margin-left: 15px; }.banner-head-5 { /* Calculators Header */ margin-left: 15px; }.banner-logo { height: 21px; }}

 <div class="mainBorder calculatorSection" id="inputSection"> <:-- Calculator --> <div class="radioArea" style="padding-bottom; 5px." id="input1"> <label class="inputText noDecoration labelText">Units</label> <a href="./calorie-calculator.html"> <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'"> <label class="inputText noDecoration">Metric</label> </a> <a href="./calorie-calculator-imperial.html"> <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial;html'"> <label class="inputText noDecoration">Imperial</label><br> </a> </div> <div class="radioArea" id="input2"> <label for="gender" class="inputText labelText">Gender</label> <input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle"> <label for="Male" class="inputText">Male</label> <input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle"> <label for="Female" class="inputText">Female</label><br> </div> <div class="inputArea" id="input3"> <label for="ageInput" class="inputText labelText">Age</label> <input type="number" id="ageInput" class="inputField textInput" placeholder="12-80"><br> </div> <div class="inputArea" id="input4"> <label for="heightInput" class="inputText labelText">Height</label> <input type="number" id="heightInput" class="inputField textInput" placeholder="100cm - 200cm"><br> </div> <div class="inputArea" id="input5"> <label for="weightInput"class="inputText labelText">Weight</label> <input type="number" id="weightInput" class="inputField textInput" placeholder="30kg - 120kg"><br> </div> <div class="inputArea" id="input6"> <label for="exerciseInput"class="inputText labelText">Exercise</label> <select id="exerciseInput" class="inputText selectInput"> <option class="inputText selectOption">Exercise</option> <option value="noExercise" id="noExercise" class="inputText selectOption">Inactive</option> <option value="lightExercise" id="lightExercise" class="inputText selectOption">Light Activity</option> <option value="moderateExercise" id="moderateExercise" class="inputText selectOption">Moderate Activity</option> <option value="activeExercise" id="activeExercise" class="inputText selectOption">Active</option> <option value="veryActiveExercise" id="veryActiveExercise" class="inputText selectOption">Very Active</option> <option value="extraActiveExercise" id="extraActiveExercise" class="inputText selectOption">Extra Active</option> </select><br> </div> <button class="buttonStyle" onclick="showResults()." id="hideButton">ADD</button> <span class="resultsSection" id="resultsSection"> <div class="inputText resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeWeightGain" class="inputText"></span></div> <div class="inputText resultsText">Weight Gain(0.5kg/week) - <span id="averageWeightGain" class="inputText"></span></div> <div class="inputText resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildWeightGain" class="inputText"></span></div> <div class="inputText resultsText">Maintain Calories - <span id="maintainCalories" class="inputText"></span></div> <div class="inputText resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildWeightLoss" class="inputText"></span></div> <div class="inputText resultsText">Weight Loss(0.5kg/week) - <span id="averageWeightLoss" class="inputText"></span></div> <div class="inputText resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeWeightLoss" class="inputText"></span></div> </span> </div>

Hi there,

I am trying to make my site responsive but it stops working at 760px. When it his 760px everything else gets moved and out of place. The problem happens when I click on a button to hide the input section and display the answers. Nothing is displaced on the button press for 760px+. The code is very similar at each code break and I can't find the issue.

Here is what it looks like before the button press: img-1

Here is what it looks like after the button press img-2

Answer 1

Check out these:

object-fit:cover;

@media screen and (min-width: 000px) and (max-width: 000px)

Answer 2

I guess, you have radioArea width set to 700px, maybe that's why? Width of your class are fixed, you have to change it according to screen width, if you want to make a responsive design For example you can use width in percents, not in fixed pixels, but add max-width property, as you do not want to have it more than 700px

Answer 3

At (max-width: 760px) you set the overflow-x: hidden , it will break the EventListener.

The solution is to set overflow-x: auto