Page Responsiveness - Product Landing Page

Hi, fellow coders,
I am having some issues with responsiveness on mobile.

Link:

Issue 1: Navbar does not seem to be working properly still on mobile

Issue 2: I am not familiar with making mobile-friendly sites yet and @media queries are still confusing to me. How to remove this from my site and set a certain width so that I would not be able to scroll to the right and see this blank space?

Issue 3: I have figured out on desktop how to keep the image from breaking apart from the rest of the body – by setting a max-width: 1080px and margin:0 auto; property to the body element in CSS. However, on mobile, even though I used a media query and used flexbox and centered all the elements, the img and text are not aligned with the rest of the page.

Sorry for these noob questions. I’m still a beginner and I am getting stuck with how to make sites more mobile-friendly.

  1. It looks good on my end.

2, 3. First, give your html box-sizing: border-box. The paddings and margins are all accounted in a given width.
Remove width from your #signup paragraph.
Don’t give set height and width to your pizza image. Remove margin-left, border then give it width:100%;

Giving your elements set width and height is not a good idea when you are building mobile responsive pages. Use relative units like em or rem and percentages when you are defining height and widths of elements. Give box-sizing:boder-box for intuitive box-model layouts.

홧팅요! ㅎㅎ

2 Likes

Phillip 형, 감사합니다!

You’re a lifesaver :smiley:
After doing what you suggested, my code works exactly the way I wanted it to.

Thank you for also letting me know about box-sizing and not giving elements set widths and heights ㅎㅎㅎ

1 Like

I think your site looks great.

I’ve been really confused with position fixed and flex box. You seem to have it working together.

What editor are you using? I’m using codepen and more code jumps all over the page. Big indentation where it shouldn’t be.