The page seems good when the zoom is at 100%, but when I zoom further in or out, things start falling out of place, the link to the code is below.
What am I doing wrong?
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)- The test script, with all tests passing, should be included when you submit your projects.
One of the tests that’s failing is the requirement for a media query.
When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
You will want to start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
Some things to note,
- Do not try and replicate the sample projects. They show one way the project can be done. The instructions say yours should be “functionally similar” and to “give it your own personal style”.
- Keep your styling external. Do not use internal styling.
Ok, thank you Leader, however.
On the first point, how/what do you mean, should I include that code within the page’s code, if so, where exactly and what purpose does it serve?
The second point, how/what exactly do you mean?
On narrowing the view port, do you mean I should zoom out as far as possible, like all the way down to 25%, if no, how/what exactly do you mean?
On styling, do you mean I should do it like it’s done in this picture below, if no, how/what do you mean?
This is the third of the five RWD projects. Just like the first two, the test script should be in the project, with all tests passing when you submit the project.
You can take the test script and paste it into codepen’s HTML editor.
On a side note, if you fork the pen as per the instructions the test script will be there for you and you won’t have to manually add it.
If this is referring to the failing test that I mentioned you have to install the test script and then run it to see what’s failing.
By narrowing I mean simulate a smaller device. The easiest way to do that is to open your page full view then drag the right edge of the browser and move it all the way to the left as far as it will go.
Regarding styling. Keep your style external, not internal.
Codepen has an HTML editor where you put your HTML code. It also has a CSS editor and that’s where your CSS should go.
Having style tags and CSS in them is internal styling which you don’t want to do.
Codepen provides the boilerplate for you so you don’t have to do any linking between HTML and CSS.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.