The input area on mobile

Curriculum Help
,
1

Screenshot (19)
Screenshot (19)318Ă—392 67.8 KB

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?

2

Hello @Coded_Prof.

Did you mean making the input fields left aligned?

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

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

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?

6

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

7

not good with media queries yet

8

Use this code:

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

Learn more about media queries here:

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

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.