Tell us what’s happening:
I have no idea on why my media query is not being accepted. It works on live server through vscode changing my margins very slightly. Syntax doesn’t seem to be the issue i think. Could i be missing something else?
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Solve A Rubik's Cube</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="test.css">
</head>
<body>
<nav id="navbar"><header>Rubik's Cube</header>
<ul>
<li><a class="nav-link" href="#White_Cross">White Cross</a></li>
<li><a class="nav-link" href="#First_Two_Layers">First Two Layers</a></li>
<li><a class="nav-link" href="#Orienting_Cross_Top_Yellow">Orienting Cross Top Yellow</a></li>
<li><a class="nav-link" href="#Orienting_Yellow_Corners">Orienting Yellow Corners</a></li>
<li><a class="nav-link" href="#Permuting_the_Last_Layer">Permuting the Last Layer</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="White_Cross"><header>White Cross</header><p><code>e=mc2</code></p><p></p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque elit ullamcorper dignissim cras. Lobortis elementum nibh tellus molestie. Vestibulum lectus mauris ultrices eros. Sit amet justo donec enim. Massa tempor nec feugiat nisl pretium fusce. Bibendum ut tristique et egestas quis ipsum suspendisse. Elementum integer enim neque volutpat ac tincidunt vitae semper. Turpis tincidunt id aliquet risus feugiat. Sit amet purus gravida quis blandit. Ridiculus mus mauris vitae ultricies leo integer malesuada. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. In fermentum et sollicitudin ac orci phasellus egestas. Tellus orci ac auctor augue mauris augue neque gravida in. Diam phasellus vestibulum lorem sed risus ultricies.</p> <ul>list numbers
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><p> </p></section>
<section class="main-section" id="First_Two_Layers"><header>First Two Layers</header><p><code>e=mc2</code></p><p>Est placerat in egestas erat imperdiet. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Dui sapien eget mi proin sed libero enim. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Tincidunt eget nullam non nisi est sit. Ullamcorper malesuada proin libero nunc consequat. Ultrices mi tempus imperdiet nulla malesuada. Vulputate sapien nec sagittis aliquam. Faucibus vitae aliquet nec ullamcorper. Nibh venenatis cras sed felis eget velit aliquet sagittis. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Suscipit tellus mauris a diam maecenas sed enim ut sem. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. In mollis nunc sed id semper risus in. Lacus sed viverra tellus in hac habitasse platea dictumst.</p></section>
<section class="main-section" id="Orienting_Cross_Top_Yellow"><header>Orienting Cross Top Yellow</header><p><code>e=mc2</code></p><p>Iaculis nunc sed augue lacus viverra vitae congue eu. A scelerisque purus semper eget duis at tellus at urna. Id aliquet risus feugiat in ante metus dictum at. Nullam vehicula ipsum a arcu cursus. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Congue quisque egestas diam in arcu cursus euismod quis viverra. Tellus orci ac auctor augue mauris augue neque gravida in. Ut faucibus pulvinar elementum integer enim neque volutpat. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Dolor sit amet consectetur adipiscing. Vulputate mi sit amet mauris. Est placerat in egestas erat imperdiet sed euismod nisi. Ornare quam viverra orci sagittis eu volutpat odio. Aliquam ultrices sagittis orci a scelerisque purus semper. Congue eu consequat ac felis donec et odio.</p></section>
<section class="main-section" id="Orienting_Yellow_Corners"><header>Orienting Yellow Corners</header><p><code>e=mc2</code></p><p>Augue ut lectus arcu bibendum at varius vel. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Venenatis tellus in metus vulputate eu scelerisque. In nisl nisi scelerisque eu ultrices vitae auctor eu. Consectetur lorem donec massa sapien faucibus et. Mi proin sed libero enim sed faucibus turpis in eu. Placerat in egestas erat imperdiet sed euismod nisi porta. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Ipsum nunc aliquet bibendum enim facilisis gravida. Hendrerit dolor magna eget est.</p></section>
<section class="main-section" id="Permuting_the_Last_Layer"><header>Permuting the Last Layer</header><p><code>e=mc2</code></p><p>Sit amet justo donec enim diam vulputate ut pharetra sit. Interdum velit euismod in pellentesque massa placerat. Donec ultrices tincidunt arcu non. Habitant morbi tristique senectus et netus et. Et ultrices neque ornare aenean euismod elementum nisi quis. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Ut enim blandit volutpat maecenas volutpat blandit. Sit amet commodo nulla facilisi nullam vehicula ipsum. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Risus pretium quam vulputate dignissim suspendisse in est ante in. Blandit libero volutpat sed cras. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Diam sit amet nisl suscipit.</p></section>
</main>
</body>
</html>
#navbar {
position: fixed;
height: 100%;
padding: 10px;
border-right: 2px solid gray;
width: 20vw;
display: block;
}
#main-doc {
position: relative;
left: 20vw;
margin: 0 5vw;
width: 70vw;
}
@media (max-width: 415px) {
#main-doc {
margin: 0 7.5vw;
width: 70vw;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page