Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html

How to create a responsive form using CSS

Mohe Ud Din Sheikh

Introduction

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.

Syntax

@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.

Example

Responsive form example

Explanation

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.

RELATED TAGS

css
html

CONTRIBUTOR

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

View all Courses

Keep Exploring