Tell us what’s happening:
I cannot pass the Media Query section. When I started this I was using CodePen, now it takes you to another lesson like page. I entered the same code from my CodePen that works but the same code doesn’t work in the page.
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.
HTML Code
<nav id = "navbar">
<header> Bootstrap</header>
<ul>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#what_you_can_do_with_bootstrap">What you can do with Bootstrap</a></li>
<li><a class="nav-link" href="#Bootstrap_Layouts">Bootstrap Layouts</a></li>
<li><a class="nav-link" href="#Navigation_Bar">Navigation Bar</a></li>
<li><a class="nav-link" href="#Buttons">Buttons</a></li>
<li><a class="nav-link" href="#Progress_Bars">Progress Bars</a></li>
</ul>
</nav>
<!-- Introduction - Main Body -->
<main id="main-doc">
<section id="introduction" class="main-section">
<header id="Introduction-header"> Introduction </header>
<p>Bootstrap is a free front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.
</p>
<p> Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
</p>
</section>
<!--What You Can Do With BootStrap-->
<section id="what_you_can_do_with_bootstrap" class="main-section">
<header id="What_you_can_do_with_Bootstrap-header">What you can do with Bootstrap </header>
<article>
<p>
<ul>
<li> You can easily create responsive websites.</li>
<li>You can quickly create multi-column layout with pre-defined classes. </li>
<li> You can quickly create different variation of navigation bar.</li>
<li> You can easily create carousel or image slider to showcase your content.</li>
<li> You can create colors and bold statements to websites</li>
</ul>
</p>
</article>
</section>
<p> Container classes are very important class in Bootstrap. It provides margins, padding, alignments, and more. </p>
<!-- Layouts -->
<section class ="main-section" id="Bootstrap_Layouts">
<header id="Bootstrap_Layouts-header"> Bootstrap Layouts </header>
<article>
<p>Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices.</p>
<p>With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts. Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.
</p>
<pre class="goodCode">
<xmp>
<div class="container">
<!-- Content here -->
</div>
</xmp>
</pre>
<p> Or you can use a fluid container. Use <code>.container-fluid</code> for a full width container, spanning the entire width of the viewport. Choose from a responsive, fixed-width container (meaning its <code>max-width </code>changes at each breakpoint) or fluid-width (meaning it’s <code>100%</code> wide all the time).
</p>
</article>
</section>
<!-- Navigation Bar -->
<section class ="main-section" id="Navigation_Bar">
<header id="Navigation_Bar-header"> Navigation Bar</header>
<article>
<p>
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with
<pre class="goodCode">
<code><nav class="navbar navbar-default">
</code>
</pre>
The following example shows how to add a navigation bar to the top of the page
<pre class="goodCode">
<code>
<xmp>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</xmp>
</code>
</pre>
</p>
<p> Navbars require a wrapping <code>.navbar </code> with <code>.navbar-expand{-sm|-md|-lg|-xl} </code> for responsive collapsing and color scheme classes.
</p>
</article>
</section>
<section class ="main-section" id="Buttons">
<header id="buttons-header"> Buttons </header>
<article>
<p>
There are several different types of buttons that you can use on your webpage.
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</p>
<p> The classes needed to create buttons <code> .btn, .btn-default, .btn-link, .btn-warning</code> etc.
</p>
<p>
A Warning button lets the user know what they are doing could lead to an irreverable process, such as deleting their account.
<pre class="goodCode">
<button type="btn-danger">Danger</button>
</pre>
</p>
<p> A link button will display or move the user to materials on another website.
</p>
</article>
</section>
<p>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code> .sr-only</code> class.</p>
<section class ="main-section" id="Progress_Bars">
<header id="Progress_Bars-header"> Progress Bars </header>
<article>
<p>A progress bar can be used to show a user how far along he/she is in a process.
There are several different types of progress bars. There are the default, progress with labels, colored progress bars, progress bars with images, etc.
</p>
<p> Progress bars can be a fun way of waiting for your information to load or download as the case maybe.
</p>
<p>
Sample code for a default progress bar below
</p>
<pre class="goodCode">
<xmp>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
</xmp>
</pre>
</p>
</article>
</section>
<footer> The information was provied by <a href = "https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target ="_blank"> www.tutorialrepublic.com</a>
</footer>
</main>
</div>
********
CSS Code
@media screen and (max-width: 600px) {
.navbar {
float: none;
width: 100%;
}
}
#navbar{
position:fixed;
min-width:290px;
top:0px;
left:0px;
height:100%;
background-color:pink;
}
#main-doc{
position: absolute;
margin-left:310px;
padding:20px;
margin-bottom:110px;
}
header{
font-size:30px;
margin:10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
p{
margin:10px;
}
.goodCode {
border-left: solid;
border-color: #00aa00;
background-color:white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: