I'm doing an assignment in Html and CSS using grid layout and I know my code is sloppy since I'm just starting to learn. I have two issues that are preventing me from passing this assignment and they are:
have a form element that is as wide as the window when the window is narrower than 600 px
I thought I had that in the code with the width and also my media screen changes the form size when the window is less than 600 px.
Also, I only have one form element, but for some reason, I keep getting the two above mentioned errors when being graded, can someone assist me?
my html and css:
form {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
gap: 1px 1px;
grid-template-areas: ". ." ". ." ". ." ". ." ". .";
width: 600px;
}
select {
width: 200px;
}
.name {
grid-column: 1 / 1;
}
.type {
grid-column: 2 / 2;
}
.bio {
grid-column: 1 / 1;
}
.email {
grid-column: 2 / 2;
}
.submit {
grid-column: 1 / 2;
}
.reset {
grid-column: 3 / 2;
}
#media screen and (max-width: 600px) {
button,
input,
textarea,
select,
label {
display: block;
margin: 0;
text-align: left;
width: 100%;
}
}
/* card */
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
transition: 0.3s;
width: 344px;
}
.card:hover {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}
.container {
padding: 16px 16px;
}
div.title {
font-size: 22px;
color: #000;
}
div.secondary {
font-size: 11px;
color: #232F34;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assessment</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<!-- Your markup goes here. -->
<form action="/pets" method="post">
<fieldset>
<legend>Add Pet</legend>
<div class="formgrid">
<div class="name">
<label for="name">Name</label>
<input type="text" id="name" name="pet_name">
</div>
<div class="type">
<label for="type">Type</label>
<select id="type" name="pet_type">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
<option value="other">Other</option>
<option value="zebra">Zebra</option>
</select>
</div>
<div class="bio">
<label for="bio">Biography</label>
<textarea id="bio" name="pet_bio"></textarea>
</div>
<div class="email">
<label for="owner-email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div class="submit">
<button type="submit" id="new-pet-submit-button">Create new pet</button>
<button type="reset">Reset</button>
</div>
</div>
</fieldset>
</form>
<!----card---->
<div class="card">
<img src="images/desert.jpg" alt="Avatar" height="height:194px" width="344px">
<div class="container">
<div class="title">Title goes here</div>
<div class="secondary">
<img src="images/person-avatar.jpg" alt="Avatar" class="avatar" style="width:40px">
Secondary text
<p>
Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</p><br>
</div>
</div>
</body>
</html>
Change your width:600px; in the form section to max-width: 600px;
form {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
gap: 1px 1px;
grid-template-areas: ". ." ". ." ". ." ". ." ". .";
max-width: 600px;
}
This will make it responsive while under 600px
Related
I'm new to HTML and I'm practicing some layouts in which I'm trying to get something like below:
But I'm having difficulties achieving the "Surname" layout which is beside the "Title" field and the "Surname" text box is aligned with the GivenName longer text box at the end.
I attempted the following:
But I couldn't seem to get surname to appear beside "Title" and ensuring the end of its text box is aligned with the given name textbox at the end.
Would appreciate some help on this.
HTML and CSS code:
.small_field {
width: 80px;
margin-left: 10px;
}
.long_field {
width: 200px;
margin-left: 10px;
}
.entity {
margin-top: 10px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>testform</title>
<link rel = "stylesheet" href = "test2.css">
</head>
<body>
<div class = "entity">
<label >Title</label>
<input type = "text" id = "title" disabled class = "small_field">
</div>
<div class = "entity">
<label >Surname</label>
<input type = "text" id = "surname" disabled class = "small_field">
</div>
<div class = "entity">
<label id = "">GivenName</label>
<input type = "text" id = "givenname" disabled class = "long_field">
</div>
</body>
Flex could be used here :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form,
.entity {
display: flex;
}
form {
flex-wrap: wrap;
}
.entity.full {
min-width: 90%;
}
.entity,
.entity>* {
flex: 1;
margin: 10px 10px 0 0
}
.entity>.long_field {
flex: 3.35;
}
input {
border: green solid;
}
label {
text-align: right;
padding-right: 1em;
}
<form>
<div class="entity">
<label>Title</label>
<input type="text" id="title" disabled class="small_field">
</div>
<div class="entity">
<label>Surname</label>
<input type="text" id="surname" disabled class="small_field">
</div>
<div class="entity full">
<label id="">GivenName</label>
<input type="text" id="givenname" disabled class="long_field">
</div>
</form>
see that guide to go further : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
grid is also a possibility , here is another guide https://css-tricks.com/snippets/css/complete-guide-grid/ .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form {
padding: 10px;
}
form,
.entity {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.entity {
grid-template-columns: auto 1fr;
}
.entity.full {
grid-column: auto / span 2;
}
label {
width: 8em;
text-align: right;
}
input {
border: solid green;
}
<form>
<div class="entity">
<label>Title</label>
<input type="text" id="title" disabled class="small_field">
</div>
<div class="entity">
<label>Surname</label>
<input type="text" id="surname" disabled class="small_field">
</div>
<div class="entity full">
<label id="">GivenName</label>
<input type="text" id="givenname" disabled class="long_field">
</div>
</form>
There are lots of ways to place elements beside each other. A simple way is to put a div around the title and surname fields and give it display: flex.
I don't quite understand what ur trying to achieve, but if ur trying to change the position of Surname u can add position : absolute; in css and then with left : and top : u can put it anywhere
I created a grey color background so I could overlay it on top of a picture I currently have. The picture is in a urls.py file and is passed as the background. I want the grey to fade into a picture but the grey background isn't covering up the entire screen just some of it. I know it has to do with the padding and margins probably but I am pretty new to html and css. I also have an animation I made with an svg I want to be on top of the grey background. It is doing the fading part but after 10 seconds the grey color comes back and doesn't disappear. I am also using my django server as my backend to run the website.
I have tried making the margins and padding 0 which didn't work and also varying the numbers on the margins and padding which doesn't make it fill the whole website. Here's my code.pen so it's easier to see https://codepen.io/anon/pen/zgzxRz
html code
<html>
<div id="header">
<div id="content">
<head>
<style>
body {
font-family: 'Arimo';
height: 100%;
margin: 0;
}
.animated {
background-color:grey;
background-repeat: no-repeat;
-webkit-animation-duration: 10s;animation-duration: 10s;
padding: 0 0;
margin:10px;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<div id = "animated-example" class = "animated fadeOut"></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 100">
<text class="txt1" dy="50">ACCENT
<animate dur="8s"repeatCount="1" attributeName="stroke-dashoffset" values="400; 0" />
</text>
</svg>
</div>
</div>
</html>
<div class="container">
<form #ppForm= "ngForm">
<div class="form-group">
<div class="dropdown">
<select class="form-control" #pp (change)="onSelectPP($event.target.value); sfr.value=''">
<option class="form-control" [value]='' selected>Select protection profile</option>
<option class="form-control" *ngFor="let i of ppList; let idx = index" [value]=idx id=i>{{ i }}</option>
</select>
</div>
<div class="dropdown">
<select class="form-control" #sfr (change)="onSelectSFR($event.target.value); tc.value=''">
<option class="form-control" [value]='' selected>Select SFR</option>
<option class="form-control" *ngFor="let j of SFRList; let x = index" [value]=x id=j>{{ j }}</option>
</select>
</div>
<div class="dropdown">
<select class="form-control" #tc (change)="onSelectTestCase($event.target.value)">
<option class="form-control" [value]='' selected>Select test case</option>
<option class="form-control" *ngFor="let k of testCaseList; let y = index" [value]=y id=k>{{ k }}</option>
</select>
</div>
<input #field *ngFor="let m of fieldList, let z = index" class="form-control inputfield" type="text" placeholder='{{ m }}' (input)="inputToPass[z+4]=$event.target.value; fieldValue[z]=$event.target.value" [value]="fieldValue[z]">
<div class="buttons">
<button type="submit" class="btn btn-e7e7e7" (click)="onSubmit()">Submit</button>
<button type="reset" class= "btn btn-e7e7e7" (click)="pp.value='';onReset()">Reset</button>
<button type="globalconfig" class= "btn btn-e7e7e7" (click)="setGlobs()">Set globs</button>
</div>
</div>
</form>
</div>
css code
#import url('https://fonts.googleapis.com/css?family=Arimo');
#header {
margin: 0;
padding: 0;
width: 100%;
}
#headerContent {
margin: 0px, auto; /*need to change length and go to another big page, so scrollign feature/overflow addition?*/
width: 100%; /*need to change length and go to another big page, so scrolling feature/overflow addition?*/
}
svg {
height: 100vh;
width: 100vw;
/* background-color:#5c5c5c;*/
}
path {
stroke-dasharray: 100;
animation: draw 5s forwards; /*had background color but don't need it?? */
}
.txt1 {
font-size:60px;
fill:none;
stroke:#fffbfb;
stroke-dashoffset:400;
stroke-dasharray:400;
stroke-width: 4px;
}
form{
max-width: 30em;
margin-top: 4.5%;
margin-bottom: 3%;
margin-left: auto;
margin-right: auto;
position: relative;
border-radius: 25px;
background-color:#93C1B3; /*color for box*/
padding: 1em 2em;
overflow: hidden;
}
form h1{
font-family: "Arimo";
color:rgb(7, 7, 7); /* color for word ACCENT*/
text-shadow: 2px 2px #f8f8f8; /* will want to change the shadow color later maybe once have right font color */
}
form input[type=text]::placeholder{
font-family: "Arimo";
color: #666; /* font for when you type in boxes etc */
}
form .dropdown{
display: block;
position: relative;
margin-top: 1.5px;
}
form .inputfield{
display: block;
position: relative;
margin-top: 1.5px;
text-align: center;
}
form .buttons{
display: flex;
position: relative;
justify-content: center;
margin: 1px 3px;
}
form .btn{
margin: 5px;
background-color: #EEF5DB;
color: #333745;
}
select{
text-align-last: center;
justify-content: center;
text-indent: 10px;
}
and here is where the picture is being loaded in the backend folder
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>accent</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="background-image: url('static/background2.jpg'); background-size: cover; background-repeat: no-repeat; height: 100%">
<app-root>Loading...</app-root>
<script src="runtime-es2015.js" type="module"></script><script src="polyfills-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule></script><script src="polyfills-es5.js" nomodule></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule></script><script src="vendor-es2015.js" type="module"></script><script src="main-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule></script><script src="main-es5.js" nomodule></script></body>
</html>
so I'm a beginner and I started this project by first writing CSS in styles.scss and then transforming the code inside of it using scss tools. I made an each loop to loop through a set of colors in my color map, placed in a mixin and put that mixin under [class^=btn].
I don't know why this doesn't work?
Here is my SCSS:
//colors
$base-grey: #808080;
$base-white: #ffffff;
$base-green: #71eeb8;
$base-blue: #2dcae6; //base-success: #33c052;
$base-red: #ff6666; //red
$base-orange: #ff751a; //warning
$base-purple: #8a54f7; //info
// grid base class
.grid {
// .grid__row
&__row {
padding: 1em 10px;
display: flex;
flex-direction: column;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
flex-direction: row;
}
}
// .grid__col
&__col {
// create grid columns dynamically
// loop through each column size
#for $i from 1 through 12 {
// concatenate CSS selector, ie when $i = 1,
// selector would be .grid__col--1
&--#{$i} {
// base styles applied to all grid columns
// NOTE: could be converted to a placeholder, along with margin
// from the media query
margin-top: 10px;
flex-basis: 100%;
border: 1px red solid;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// base stlyes applied to all grid columns
margin-top: 0;
// make column width a percentage of the column number / total columns
flex-basis: #{$i / 12 * 100 + "%"} ;
}
}
}
}
}
// targets all elements with classes that begin with grid__col
[class^=grid__col] {
// grid__col + grid__col, targets two sibling columns
& + & {
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// add grid gutter
margin-left: 10px;
}
}
}
.grid {
&__row {
display: flex;
}
}
//BASE
.container {
text-align: left;
font-family: 'Arial Narrow', Arial,sans-serif;
color: $base-grey;
padding: 5px;
font-weight: 500;
}
p {
text-align: left;
line-height: 1.3;
}
a {
text-decoration: none;
}
//NAVIGATION
.nav {
list-style-type: none;
padding: 0;
text-align: center;
}
.nav__item a {
display: block;
color: inherit;
margin: 8px 0;
padding: 8px;
}
.nav__item a:hover {
color: $base-white;
background-color: $base-green;
}
//TYPOGRAPHY
//link
.link {
color: $base-blue;
font-weight: bold;
}
//blockquote
.blockquote {
border-left: $base-green 8px solid;
padding-left: 10px;
font-style: oblique;
font-size: 1.2em;
}
// headlines
#mixin h2-font-weight {
font-weight: 100;
}
.headline--primary {
color: $base-green;
margin-left: 10px;
}
.headline--secondary {
text-align: left;
#include h2-font-weight;
}
//FORM
.form {
display: flex;
flex-direction: column;
&__input {
border: none;
border-bottom: 2px solid $base-green;
margin-bottom: 15px;
}
&__label--hidden {
display: none;
}
& .headline--secondary {
#include h2-font-weight;
}
}
//BUTTONS
#mixin button-styles {
display: block;
width: 100%;
border: none;
margin-bottom: 15px;
padding: 10px;
color: $base-white;
text-transform: uppercase;
font-weight: bold;
}
$button-colors :(
default:$base-blue,
success:$base-green,
error:$base-red,
warning:$base-orange,
info:$base-purple
);
#mixin button-colors {
#each $button, $color in $button-colors {
.btn--#{$button} {
background-color: #{$color};
}
}
}
[class*=btn] {
#include button-styles;
}
//IMAGE
#mixin center-images {
display: block;
max-width: 100%;
margin: 0 auto;
padding: 8px;
}
[class^=img] {
#include center-images;
}
.img {
&--frame {
border: 2px solid $base-grey;
}
}
This is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circles UI Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<!--
List of classes used
Grid:
.container
.grid__row
.grid__col--1 *NOT USED HERE
.grid__col--2 *
.grid__col--3
.grid__col--4
.grid__col--5
.grid__col--6
.grid__col--7
.grid__col--8
.grid__col--9
.grid__col--10 *
.grid__col--11 *
.grid__col--12
.card
.centered
.theme__colors
(.grid__col--1, .grid__col--2, .grid__col--10, and .grid__col--11 are not used here in the HTML but would be good to include in the Sass)
Typography:
.container
.link
.blockquote
.headline--primary
.headline--secondary
Image:
.img--logo
.img--frame
.img--avatar
Navigation:
.nav
.nav__item
Buttons:
.btn--default
.btn--success
.btn--error
.btn--warning
.btn--info
.theme__colors
Forms:
.form
.form__label--hidden
.form__input
-->
<body class="container">
<div class="grid__row">
<div class="grid__col--3">
<a class="link" href="/">
<img class="img--logo" alt="circles logo" src="images/logo.png">
</a>
</div>
<div class="grid__col--9">
<nav role="navigation">
<ul class="nav">
<li class="nav__item">Typography</li>
<li class="nav__item">Buttons</li>
<li class="nav__item">Form</li>
<li class="nav__item">Images</li>
<li class="nav__item">Grid</li>
</ul>
</nav>
</div>
</div>
<div class="grid__row">
<div class="grid__col--12">
<div class="card">
<p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less
than 769px,
the menu will be displayed vertically.</p>
</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--8">
<div class="card">
<h4 id="type" class="headline--secondary">Typography</h4>
<h1 class="headline--primary">Take a look at this amazing headline</h1>
<p>This is a typical paragraph for the UI Kit. Here is what a link might look like.
The
typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using
italics as well from time to time</em>.
Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but
this
amazing paragraph as well. :)</p>
<blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's
right, block quotes that say, "Hey,
I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<form class="form">
<legend id="forms" class="headline--secondary">Form Elements</legend>
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
<label class="form__label--hidden" for="username">Username:</label>
<input class="form__input" type="text" id="username" placeholder="Username">
<label class="form__label--hidden" for="password">Password:</label>
<input class="form__input" type="password" id="password" placeholder="Password">
<button class="btn--default theme__colors" type="submit" value="Login">Login</button>
</form>
</div>
</div>
<h4 id="images" class="headline--secondary">Images</h4>
<div class="grid__row">
<div class="grid__col--6">
<img class="img--frame" src="images/image.png" alt="sample image">
</div>
<div class="grid__col--6">
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
</div>
</div>
<h4 id="buttons" class="headline--secondary">Buttons</h4>
<div class="grid__row">
<div class="grid__col--12">
<button class="btn--default theme__colors">default</button>
<button class="btn--success theme__colors">success</button>
<button class="btn--error theme__colors">error</button>
<button class="btn--warning theme__colors">warning</button>
<button class="btn--info theme__colors">info</button>
</div>
</div>
<h4 id="grid" class="headline--secondary">Grid System</h4>
<div class="grid__row">
<div class="grid__col--12 theme__colors">.grid__col--12</div>
</div>
<div class="grid__row">
<div class="grid__col--6 theme__colors">.grid__col--6</div>
<div class="grid__col--6 theme__colors">.grid__col--6</div>
</div>
<div class="grid__row">
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
</div>
<div class="grid__row">
<div class="grid__col--5 theme__colors">.grid__col--5</div>
<div class="grid__col--7 theme__colors">.grid__col--7</div>
</div>
<div class="grid__row">
<div class="grid__col--8 theme__colors">.grid__col--8</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
</div>
</body>
</html>
You are missing two things:
The mixin of button colours need to be:
#mixin button-colors {
#each $button, $color in $button-colors {
&.btn--#{$button} {
background-color: #{$color};
}
}
}
with & before .btn.
You didn't call your mixin. You need to write:
[class*=btn] {
#include button-styles();
#include button-colors();
}
I have the parent element set to newTableForm with labelColumn and mainFormColumn as children - but with the current CSS everything collapses into one row:
.newTableForm {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 30px 30px 30px 40px;
grid-gap: 10px;
grid-template-areas: "... main" "labels main" "labels main" "... main";
border: 2px dashed deeppink;
}
.labelColumn {
grid-area: labels;
}
.mainFormColumn {
grid-area: main;
}
<form method='post' action="/admin-post.php" class="newTableForm">
<h4 class="mainFormColumn">
Add a new price compare table
</h4>
<label for="store" class="labelColumn">Store</label>
<input type="text" name="store" placeholder="" class="mainFormColumn"/>
<label for="product-page" class="labelColumn">Product Page Link</label>
<input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
<button class="mainFormColumn">Save new price compare table</button>
</form>
Is there a way to undo the single column stacking behavior here? I would remove the template areas altogether if not for the blank sections with ... (above and below the label section)
Again you can drop grid-template-areas as multiple grid-areas overlap - and you can use pseudo elements for this:
place labelColumn into the first column using grid-column: 1 and mainFormColumn into the second column using grid-column: 2.
after element will be the first column in the last row using grid-row: -2 and grid-column: 1
before will be first column in the first row using grid-column: 1
See demo below:
.newTableForm {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 30px 30px 30px 40px;
grid-gap: 10px;
border: 2px dashed deeppink;
}
.labelColumn {
grid-column: 1;
}
.mainFormColumn {
grid-column: 2;
}
.newTableForm:after, .newTableForm:before {
content: '';
display: block;
grid-column: 1;
}
.newTableForm:after {
grid-row: -2;
}
<form method='post' action="/admin-post.php" class="newTableForm">
<h4 class="mainFormColumn">
Add a new price compare table
</h4>
<label for="store" class="labelColumn">Store</label>
<input type="text" name="store" placeholder="" class="mainFormColumn"/>
<label for="product-page" class="labelColumn">Product Page Link</label>
<input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
<button class="mainFormColumn">Save new price compare table</button>
</form>
I just update your .newTableForm css with some updates. I hope it'll help you out. Thanks
.newTableForm {
display: flex;
flex-direction: column;
border: 2px dashed deeppink;
}
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}