Horizontal roll -how to fix

Horizontal roll -how to fix
0

I was told that my project was rejected due to horizontal roll and I am not sure how to fix
https://codepen.io/juanie3232/pen/LYpq

Can you provide the project link.

Rejected by who?

You do have overflow which you shouldn’t have. If you give elements fixed widths they can’t shrink down as needed. Use max-width and relative units like percentages for your widths.

I mean freecodecamp page of the project

its not from freecode camp its from another site

I get that, I was just wondering. Do they not provide some support? Don’t get me wrong you are more than welcome to post here and get help.

You have this comment in the CSS

  /* we do  n't know how to make mobile versions of websites yet, */
  /* so here we've set a minimum page width */

So does that mean it just has to fit inside the min-width: 1100px page width?

yes I believe the min-width would be 1100px

If you’re looking to make your site mobile responsive, then you’re not going to like my reply.

Always, always, always build mobile first. Then scale out using media queries. To accomplish the inverse of that flow is going to be a lot of unnecessary work.

I highly recommend redoing & starting with mobile first.

For that setup to work, it seems to me you are supposed to wrap all HTML on the page inside a container element with the class .page. Does that not sound correct?

  1. Make a div and give it the class .page

  2. Put everything inside that div.

  3. Give the body a background color, like orange (just as help).

  4. Give the .page element a background color, like red (just as help).

  5. Scroll the page to the right, and look at what elements are overflowing the page element.

  6. It is mostly images, the videos, and some other fixed-width elements that you need to shrink down and reposition to not overflow the 1100px page width.


Not sure why they are making you build fixed-width designs.

In my opinion it’s not a good idea to have students build such complex pages before teaching responsive design. They should have done it the other way. Have you build a simple page with a mobile design and then teach how to build it up to the full desktop design using a mobile-first approach with min-width media queries.