What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views.

https://i.stack.imgur.com/cnfHt.png

Currently, I have managed to replicate this in a JSFiddle which looks good on desktop, but there is some white space on the right in mobile view.



I believe adjustments need to be made in the following CSS code, but I'm not certain if this class is the correct one that requires modification.

.login-page .form .login-form .add-winner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #1173B7;
    background-color: white;
    color: #1173B7;
    font-size: 14px;
    width: 25%;
    font-weight: bold;
    font-family: "Open Sans";
    outline: 0;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

.login-page .form .login-form .save {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #C4C4C4;
    border: 1px;
    color: white;
    font-size: 14px;
    width: 35%;
    font-weight: bold;
    font-family: "Open Sans";
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

Issue:

I am unsure about the necessary CSS modifications in the JSFiddle to ensure the consistency of the design across both mobile and desktop views.

Currently, there is extra space visible at the right side of the layout on mobile devices.

htmlcssformsresponsive-design

Answer №1

To update the appearance of your form on line 52 in the fiddle, adjust the CSS as follows:

.form {
background: #FFFFFF;
width: 100%;
height: 500px;
max-width: 500px;
margin: 0 auto 100px;
box-sizing: border-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 
0.24);
}

By specifying a max-width for your form, I have ensured that it will not exceed 500px in width to maintain its layout within the browser window without overflowing.

Answer №2

Your form element currently has a fixed width of 500px assigned to it.

To make it more flexible, you can adjust it as follows:

form {
    max-width: 500px;
    width: 100%;
}

Adding the following code will ensure that the padding is included in the overall width calculation:

form {
    box-sizing: border-box;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align the content to the center of the middle column using HTML

Is it possible to replicate Amazon's email structure using only HTML in the feedbackwhiz template editor? I want my content to be left-justified in the center column with white space on either side, similar to the Amazon email example provided. Amazo ...

html

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

javascriptjqueryhtmlcss

Excessive spacing issues arise while adjusting CSS height, leading to undesirable vertical scrolling

One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post. To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I enc ...

jqueryhtmlcss

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Are there any "Undefined" tabs hiding in your RMarkdown tabsets?

After knitting my RMarkdown document to an HTML file, I noticed that the tabs appeared as shown below: However, when I save and share the document with my audience, I encounter an issue where these tabs are labeled as "undefined". Just to clarify, this pr ...

htmlrr-markdown

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

htmlcssbootstrap-5

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

Choosing <label> elements, while disregarding those <label> elements that include <input>

I need assistance with CSS rules to target only <label> elements that do not contain an <input> field inside of them. Is there a specific rule I can use for this? <label for="type">Regular Label</label> <label for="type"> ...

css

I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

I am looking to showcase the image provided below. <img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/> Once the image is clicked, I want it to execute the following code. How can I ensure that ...

javascripthtml

Tips for aligning a SPAN in a navbar to the center

When attempting to center the middle span, the right span containing buttons shifts downward. I am trying to create a navigation bar with one link on the left, three links in the center, and two buttons on the right. While floating the elements on the left ...

htmlcss

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

Hello there, I am just starting out with web development and learning about Vue.js. In Vue 3, the recommended way to import CSS files from different packages is as follows: Method 1: Import directly in app.js //app.js import '../css/app.css'; i ...

javascripthtmlcssvue.js

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss

What is the CSS code to modify the color of an SVG ::marker?

I am looking to change the color of an SVG li::marker based on the font color. I attempted using fill="currentColor" but it did not work as expected. Any suggestions on how to resolve this? li::marker { content: url("data:image/svg+xml,% ...

csssvg

Spin a three-dimensional picture

Looking for some assistance! I have an image on my website that is rotated and needs to be turned back to face us correctly. I've tried using the code snippets below but they don't seem to be working: transform: rotateY(10deg); transform: rotate ...

htmlcss

Conflicts between characters in MySQL, HTML, and PHP

I am encountering an issue while retrieving text from a database. The data is stored as "♦" in the database without any problems. However, when I retrieve the record from the database, it appears on the page as a regular question mark instead of the bla ...

phphtmlmysql

How to create a dynamic height grid using Bootstrap?

Seeking assistance with implementing the layout shown in the image below using bootstrap 4. I am facing an issue with adjusting the height of div 1 and 2 dynamically based on the content in div 3. Can anyone provide some guidance? https://i.sstatic.net/mk ...

htmlcssflexboxbootstrap-4

Altering the appearance of an Angular component in real-time by applying various CSS style sheets

I'm currently working on implementing a dynamic style-sheet change for a single-page application using Angular. The concept is to offer users the ability to select from various themes through a dedicated menu. Although only two theme variants are show ...

cssangulardynamicstyles

Utilize dynamic CSS application within an Angular application

In my Angular application, I dynamically load URLs inside an iframe and want to apply custom.css to the loaded URL once it's inside the iframe. I attempted using ng-init with angular-css-injector function in the iframe, but the CSS is not being applie ...

cssangularjsurldynamic

Creating code for both the PC and mobile website by utilizing the user agent

I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...

javascripthtml

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss