Margin Issues | Custom Assessment Code <html>

SeanSEO · July 9

Hello,

I am racking my brain trying to figure out why this is cutting off my menu. I am not a coding expert by any means and I thought it was a .container margin issue. I have tried adjusting it many different ways however I still have cut-off happening on my menu.

This is what the cut-off looks like:

It happens when you click our menu icon on the upper right hand side of the site:

Any input would be INSANELY APPRECIATED!!

Thank you,

Sean

The code I am using is here:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Depression Level Assessment</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
color: black;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
margin-right: 250px;
position: relative;
z-index: 0;
}
.question {
margin-bottom: 20px;
}
.question p {
margin: 0 0 10px;
font-weight: bold;
}
.results {
display: none;
margin-top: 20px;
padding: 15px;
border-radius: 5px;
}
.results.mild {
background-color: #fff3cd;
color: #856404;
}
.results.moderate {
background-color: #f8d7da;
color: #721c24;
}
.results.severe {
background-color: #f5c6cb;
color: #721c24;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
label input[type="radio"] {
accent-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>Depression Level Assessment</h1>
<form id="depressionForm">
<div class="question">
<p>1. How often do you feel down, depressed, or hopeless?</p>
<label><input type="radio" name="q1" value="1"> Not at all</label><br>
<label><input type="radio" name="q1" value="2"> Several days</label><br>
<label><input type="radio" name="q1" value="3"> More than half the days</label><br>
<label><input type="radio" name="q1" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>2. How often do you have little interest or pleasure in doing things?</p>
<label><input type="radio" name="q2" value="1"> Not at all</label><br>
<label><input type="radio" name="q2" value="2"> Several days</label><br>
<label><input type="radio" name="q2" value="3"> More than half the days</label><br>
<label><input type="radio" name="q2" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>3. How often do you have trouble sleeping or sleep too much?</p>
<label><input type="radio" name="q3" value="1"> Not at all</label><br>
<label><input type="radio" name="q3" value="2"> Several days</label><br>
<label><input type="radio" name="q3" value="3"> More than half the days</label><br>
<label><input type="radio" name="q3" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>4. How often do you feel tired or have little energy?</p>
<label><input type="radio" name="q4" value="1"> Not at all</label><br>
<label><input type="radio" name="q4" value="2"> Several days</label><br>
<label><input type="radio" name="q4" value="3"> More than half the days</label><br>
<label><input type="radio" name="q4" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>5. How often do you have a poor appetite or overeat?</p>
<label><input type="radio" name="q5" value="1"> Not at all</label><br>
<label><input type="radio" name="q5" value="2"> Several days</label><br>
<label><input type="radio" name="q5" value="3"> More than half the days</label><br>
<label><input type="radio" name="q5" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>6. How often do you feel bad about yourself or that you are a failure or have let yourself or your family down?</p>
<label><input type="radio" name="q6" value="1"> Not at all</label><br>
<label><input type="radio" name="q6" value="2"> Several days</label><br>
<label><input type="radio" name="q6" value="3"> More than half the days</label><br>
<label><input type="radio" name="q6" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>7. How often do you have trouble concentrating on things, such as reading the newspaper or watching television?</p>
<label><input type="radio" name="q7" value="1"> Not at all</label><br>
<label><input type="radio" name="q7" value="2"> Several days</label><br>
<label><input type="radio" name="q7" value="3"> More than half the days</label><br>
<label><input type="radio" name="q7" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>8. How often do you move or speak so slowly that other people could have noticed? Or the opposite – being so fidgety or restless that you have been moving around a lot more than usual?</p>
<label><input type="radio" name="q8" value="1"> Not at all</label><br>
<label><input type="radio" name="q8" value="2"> Several days</label><br>
<label><input type="radio" name="q8" value="3"> More than half the days</label><br>
<label><input type="radio" name="q8" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>9. How often do you feel that life is not worth living?</p>
<label><input type="radio" name="q9" value="1"> Not at all</label><br>
<label><input type="radio" name="q9" value="2"> Several days</label><br>
<label><input type="radio" name="q9" value="3"> More than half the days</label><br>
<label><input type="radio" name="q9" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>10. How often do you find it difficult to get out of bed in the morning?</p>
<label><input type="radio" name="q10" value="1"> Not at all</label><br>
<label><input type="radio" name="q10" value="2"> Several days</label><br>
<label><input type="radio" name="q10" value="3"> More than half the days</label><br>
<label><input type="radio" name="q10" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>11. How often do you avoid social interactions or activities you once enjoyed?</p>
<label><input type="radio" name="q11" value="1"> Not at all</label><br>
<label><input type="radio" name="q11" value="2"> Several days</label><br>
<label><input type="radio" name="q11" value="3"> More than half the days</label><br>
<label><input type="radio" name="q11" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>12. How often do you feel overwhelmed by everyday tasks?</p>
<label><input type="radio" name="q12" value="1"> Not at all</label><br>
<label><input type="radio" name="q12" value="2"> Several days</label><br>
<label><input type="radio" name="q12" value="3"> More than half the days</label><br>
<label><input type="radio" name="q12" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>13. How often do you feel irritable or frustrated?</p>
<label><input type="radio" name="q13" value="1"> Not at all</label><br>
<label><input type="radio" name="q13" value="2"> Several days</label><br>
<label><input type="radio" name="q13" value="3"> More than half the days</label><br>
<label><input type="radio" name="q13" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>14. How often do you feel like you are not good enough?</p>
<label><input type="radio" name="q14" value="1"> Not at all</label><br>
<label><input type="radio" name="q14" value="2"> Several days</label><br>
<label><input type="radio" name="q14" value="3"> More than half the days</label><br>
<label><input type="radio" name="q14" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>15. How often do you experience physical aches and pains with no clear cause?</p>
<label><input type="radio" name="q15" value="1"> Not at all</label><br>
<label><input type="radio" name="q15" value="2"> Several days</label><br>
<label><input type="radio" name="q15" value="3"> More than half the days</label><br>
<label><input type="radio" name="q15" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>16. How often do you feel disconnected from those around you?</p>
<label><input type="radio" name="q16" value="1"> Not at all</label><br>
<label><input type="radio" name="q16" value="2"> Several days</label><br>
<label><input type="radio" name="q16" value="3"> More than half the days</label><br>
<label><input type="radio" name="q16" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>17. How often do you feel unmotivated to do anything?</p>
<label><input type="radio" name="q17" value="1"> Not at all</label><br>
<label><input type="radio" name="q17" value="2"> Several days</label><br>
<label><input type="radio" name="q17" value="3"> More than half the days</label><br>
<label><input type="radio" name="q17" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>18. How often do you feel like a burden to others?</p>
<label><input type="radio" name="q18" value="1"> Not at all</label><br>
<label><input type="radio" name="q18" value="2"> Several days</label><br>
<label><input type="radio" name="q18" value="3"> More than half the days</label><br>
<label><input type="radio" name="q18" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>19. How often do you feel that your future is bleak?</p>
<label><input type="radio" name="q19" value="1"> Not at all</label><br>
<label><input type="radio" name="q19" value="2"> Several days</label><br>
<label><input type="radio" name="q19" value="3"> More than half the days</label><br>
<label><input type="radio" name="q19" value="4"> Nearly every day</label>
</div>
<div class="question">
<p>20. How often do you feel like you lack purpose or direction in life?</p>
<label><input type="radio" name="q20" value="1"> Not at all</label><br>
<label><input type="radio" name="q20" value="2"> Several days</label><br>
<label><input type="radio" name="q20" value="3"> More than half the days</label><br>
<label><input type="radio" name="q20" value="4"> Nearly every day</label>
</div>
<button type="button" onclick="calculateDepression()">Get Results</button>
</form>
<div id="results" class="results"></div>
</div>
<script>
function calculateDepression() {
let form = document.getElementById('depressionForm');
let formData = new FormData(form);
let totalScore = 0;
for (let [key, value] of formData.entries()) {
totalScore += parseInt(value);
}
let resultsDiv = document.getElementById('results');
resultsDiv.style.display = 'block';
if (totalScore <= 20) {
resultsDiv.className = 'results mild';
resultsDiv.innerHTML =
<h2>Mild Depression</h2>
<p>You are experiencing mild symptoms of depression. It's important to monitor these feelings and take steps to improve your mental health.</p>
<p><strong>Next Steps:</strong> Consider speaking with a therapist to discuss your feelings. Engage in self-care activities and reach out to friends and family for support.</p>
;
} else if (totalScore <= 40) {
resultsDiv.className = 'results moderate';
resultsDiv.innerHTML =
<h2>Moderate Depression</h2>
<p>You are experiencing moderate symptoms of depression. It's important to seek help to address these feelings and improve your mental health.</p>
<p><strong>Next Steps:</strong> Reach out to a mental health professional for support and guidance. Consider therapy and explore coping strategies to manage your symptoms.</p>
;
} else {
resultsDiv.className = 'results severe';
resultsDiv.innerHTML =
<h2>Severe Depression</h2>
<p>You are experiencing severe symptoms of depression. It's crucial to seek professional help immediately to address these feelings and improve your mental health.</p>
<p><strong>Next Steps:</strong> Contact a mental health professional as soon as possible. Therapy and possibly medication may be needed to help manage your symptoms. Do not hesitate to reach out to loved ones for support.</p>
;
}
}
</script>
</body>
</html>

HoaLT · July 9

Can you share your URL here? it can help us to check your issue easier

SeanSEO · July 10

@HoaLT

of course!

https://www.spacebetweencounselingservices.com/depression-level-assessment

sorry I added it when I created thread....should've added in thread also!

Edited July 10 by SeanSEO

HoaLT · July 11

Currently the its parent element is set under another one

So You can try the follwong css code make it locate over other one

#sidecarNav {
  z-index: 9;
}

Let me know how it works on your site

Edited July 12 by HoaLT

SeanSEO · July 15

@HoaLT thank you for getting back to me! Sorry for the delay I had a short 4 day cruise and we left on Thursday.

THANK YOU so much!!!! I added that and it seems to work now! You are a life saver my friend! - Sean

Edited July 15 by SeanSEO

Margin Issues | Custom Assessment Code <html>

Recommended Posts

SeanSEO

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

SeanSEO

HoaLT

HoaLT

Posted Images

HoaLT

SeanSEO

HoaLT

SeanSEO

Create an account or sign in to comment

News

SeanSEO

HoaLT

HoaLT

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources