The input area on mobile

Screenshot (19)

Greeting to everyone. I submitted this site. I was ok on ipad and desktop version. On the mobile version, the input field has shifted into the page, how do I get it to be directly under the name label?

1 Like

Hello @Coded_Prof.

Did you mean making the input fields left aligned?

Also, can you provide a live URL of the project? Thanks.

1 Like

yeah, here it is

Actually, it will be aligned left on the desktop version, but not on the mobile phone version

1 Like

Hello @Coded_Prof. Can you try setting the input elements to display: block; in mobile devices? Thanks.

how do I single out “mobile devices only” for this css styling?

1 Like

Aren’t you familiar with @media CSS rules? Use it!

not good with media queries yet

1 Like

Use this code:

@media only screen and (max-width: 768px) {
      input {
             display: block;

Learn more about media queries here:

1 Like

Thank you Paul. I really appreciate. I’ve added the media query to my css but is hasnt changed the position of the input field

1 Like

Paste the code I provided and instead of display: block, try adjusting the width. If that doesn’t work, try changing the max-width to min-width declared in the @media statement.