Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags


How to create a responsive form using CSS

Mohe Ud Din Sheikh


Responsive web development is a technique that generates dynamic changes in the appearance of a website based on the screen size and the orientation of the device. It makes a web application useable for multiple types of devices.

To make our web applications more responsive, we use media queries by using @media.

Let's create a responsive form to have a better understanding of this.


@media only screen and (max-width: 900px){
//Add some styling
Media query syntax

In the above code, we use a media query with @media to make the form responsive. By using the (max-width: 900px) condition, we define the condition for the width of the screen to be less than or equal to 900px for the styling to be implemented.

Let's review a code example to understand how it works.


Responsive form example


In the CSS (SCSS) file:

  • Line 38: We use @media to make the form responsive and provide the condition for the screen styling to be implemented when the screen size is equal to or less than 900px.
  • Line 41: We use the grid-template-columns property to define the column of the grid container.
    • By using auto in the grid-template-columns property, we adjust the size of the column relative to the outer element and the column's contents.
    • By using auto twice in the grid-template-columns property, we adjust the size of the two columns relative to the outer element and the columns' contents.
  • Line 45: We use the (max-width: 600px) condition, under which the screen size should be less than or equal to 600px for the form to be displayed in a single-column outline.




Mohe Ud Din Sheikh
Copyright ©2022 Educative, Inc. All rights reserved

View all Courses

Keep Exploring