Jump to content

Margin Issues | Custom Assessment Code <html>

Go to solution Solved by HoaLT,

Recommended Posts

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:

image.thumb.png.59b8a4a6584cec83173fa94eb2924ebb.png

 

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

image.png.0099f78a9a674cd99dad54271e072a4c.png

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>

 

 

Link to comment
  • Solution
Posted (edited)

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 by HoaLT

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
Posted (edited)

@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

 

image.thumb.png.0ff6dcbdc4529747eb19a7b4dbf5420c.png

 

 

image.png

Edited by SeanSEO
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.