Issue with Build a Survey Form (Responsive Mobile help needed!)

Code Feedback
1

Hey guys,

I’ve finished my project for Build a Survey Form at https://codepen.io/rickwing/full/aRKZbO

  1. It would be great to hear any feedback on the project itself.

  2. I’m having an issue when viewing this page on my mobile iPhone X. The page is wider than my mobile screen and I see a horizontal scroll which is not the best experience to view. I’m thinking it’s an issue with the width or display settings of the page possibly, is there something I’m missing here?

Thank you.

2

Hi, I like what you did there, but when I checked your code I saw that you have two missing pieces.

  1. You forgot to close your 7th div element
  2. And you also forgot to put “>” to your closing body tag :slight_smile:
3

Hi Michael. While I can’t write out all the code that can fix your issues, I can point you in the right direction.

In order for your site to display optimally on smaller screen sized such as an iphone X, you need to write additional CSS for your site to make it responsive. This is done using media queries, which can assign certain styling at certain view port sizes (a minimum, or max width, based on the device.) Where the styles written are applied within those sizing parameters.

TLDR: Look into css media queries and responsive design

If this doesn’t answer your question, or provide any helpful knowledge please let me know!

5

Thanks for checking this for me!

6

Great, I had a feeling it may be to do with media queries, will look into it. Thanks Kyle.

7

With regards to the iPhone scaling you can also adjust the initial scale in the meta tag a bit and it will prevent this overscroll issue too. A commonly suggested scale factor is 0.86.

For example: <meta name=“viewport” content=“width=device-width, initial-scale=0.86”>

If you have to go much smaller than that you should definitely considering mobile specific formatting via media queries.

edit: just in case you are unfamiliar, meta tags go under the <head> tag in your html. On codepen you can add it under the HTML settings for the pen.

8

Thanks for your help.

I tried updating the initial scale but it doesn’t seem to have changed anything in the mobile view. It will have to be media queries that I now update to have the view appropriate for mobile!