Horizontal roll -how to fix

juanie · May 23, 2020, 4:22pm

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

crossphoton · May 23, 2020, 4:53pm

Can you provide the project link.

lasjorg · May 23, 2020, 5:00pm

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.

crossphoton · May 23, 2020, 5:04pm

I mean freecodecamp page of the project

juanie · May 23, 2020, 5:06pm

its not from freecode camp its from another site

lasjorg · May 23, 2020, 5:22pm

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?

juanie · May 23, 2020, 5:28pm

yes I believe the min-width would be 1100px

kerafyrm · May 23, 2020, 5:45pm

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.

lasjorg · May 23, 2020, 5:53pm

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?

Make a div and give it the class .page
Put everything inside that div.
Give the body a background color, like orange (just as help).
Give the .page element a background color, like red (just as help).
Scroll the page to the right, and look at what elements are overflowing the page element.
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.