The input area on mobile

HTML-CSS
1

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
2

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
3

yeah, here it is https://bluekodez.github.io/form/.

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

1 Like
4

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

5

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

1 Like
6

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

7

not good with media queries yet

1 Like
8

Use this code:

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

Learn more about media queries here:

1 Like
9

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
10

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.