First project - need help!

HTML-CSS
1

Hello

I’m working on my first css/html project, but I don’t know how to make the page responsive? Any help and improvements would be appreciated!

https://codepen.io/erik134/pen/XWjJaYw

2

Some things you can go @Nicke;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 7/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

You’re using relative units…that’s good.

Here’s a tip;
Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. To help you visualize how your page is set up add the following universal reset to the top of your CSS;

* {
  border: solid 1px red;
}

For responsiveness, narrow your browser window as much as you can and style so that all element fit without a horizontal scrollbar.
Widen the browsers window slowly and see if there’s a place (breakpoint) where maybe elements don’t stack but can be side by side.

Hope this helps.

1 Like
3

Hello and thanks for the advice. I still don’t understand or know how to make my website responsive, it is so frustrating…

4

You’re repeating the same question with adding any additional information.
I don’t see where you may have tried anything new.

Let’s try this approach.

  1. You wrote the HTML code and with no CSS your page was responsive albeit not that pretty to look at.
  2. You then started adding CSS code to make your page better looking.
  3. At one point as you were typing in the CSS your page width went from something that fit your screen to being so wide that there was a horizontal scrollbar. That just made your page unresponsive.
  4. What was the reason for adding this? Is it needed?
5

Hi @Nicke!

You still need to add the test script as was mentioned earlier. One of the failing tests has to deal with creating a responsive image. So if we can pass this test then we are one step closer to becoming more responsive.

Here is the FCC lesson on creating a responsive image

6

start build your project on mobile layout then go to tablet/iPad then go to desktop layout

7

Use max-width and min-height on #main instead of width and height. Or use precentages.

It doesn’t matter that you set values in em, they still compute to a pixel value that isn’t changing.

1 Like