In earlier chapters, from basics of the form we learned how to style, validate, and link our form with the database. In this section, we will learn how to make our form responsive.
We will re-use our form that we styled earlier and will see the new technique with which we can make our forms responsive.
The HTML code remains the same except that the following links are added to the <head>
tag of the HTML page.
The following first line mentioned is the viewport <meta>
tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The second line is an external media query (explained for example). The code is maintained in a separate file but the media query is written in the <head>
tag.
The following mentioned CSS file will get included and comes into action when the device screen resolution width is lower than or exactly 520 px, but as soon as the device resolution exceeds 520 px in width, the media query is no longer active.
In the...