Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Use Responsive Design with Bootstrap Fluid Containers needs Rewording
See original GitHub issueChallenge Use Responsive Design with Bootstrap Fluid Containers has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.
My code:
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
Just a suggestion to change how you phrase things in this item.
The item asks the learner to wrap all HTML in the <div class=container-fluid></div>. When I read this, I read that to mean everything, including <style> elements, rather than the elements that would normally be wrapped in the <body> element. I’ve done a little with bootstrap, so I realized what you meant, but I think this might be confusing for some people. Maybe something with an example, like:
To get started, we should nest all of the main content HTML in a
divelement with the classcontainer-fluid:
...
</style>
<div class="container-fluid">
...
</div>
That’s just my suggestion. Hope it helps!
Issue Analytics
- State:
- Created 7 years ago
- Reactions:7
- Comments:18 (9 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
The instructions appear to be incorrect:
This is the last check to pass the challenge:
The wording does clearly state that all html should be wrapped in the div element, and that includes the style portion. The lesson “Use CSS Selectors to Style Elements” clearly refers to “style elements”, so there is no ambiguity about including them. That is what I did, and that passed the test.
However, the next challenge shows the div wrapper excluding the style element. As someone new to Bootstrap, I did find that difference puzzling. If the standard is to not include the <style> portion, the instructions should not explicitly say that it should, with the implication that it is critical to do so.
Here’s my suggestion: