Im working on a project, but my elements are very spaced out and I'm not the best at CSS. I don't know if it's doing it on it's own or something is wrong with my CSS. Can you please help find the problem?
<body>
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick = "calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
</body>
</html>
CSS File Link - https://aaryank.codewizardshq.com/BillSplitter/style.css
Just replace the justify-content: space-around; to the justify-content: center; this will leave small space between your inputs and also reduce the height if you like like the following in your edited code
* {
outline: none;
border: none;
font-family: 'Fira Sans', sans-serif;
margin: 0;
}
.top-left,
.top-right {
position: absolute;
height: 60vh;
width: 50vw;
top: 0;
}
.top-right {
right: 0;
background: #7ACFD7;
}
.top-left {
left: 0;
background-color: #C22629;
}
.bottom {
position: absolute;
height: 40vh;
/*edited from height: 60vh;*/
width: 100vw;
bottom: 0;
left: 0;
background-color: #F1EFEE;
}
.top-left,
.top-right,
.bottom {
flex-direction: column;
display: flex;
justify-content: center;
/*Edited from justify-content: space-around;*/
place-items: center;
}
/**/
input[class='info'] {
font-size: 20px;
padding: 15px;
border-radius: 5px;
background: #FFF;
margin: 10px;
font-family: 'Fira Sans', sans-serif;
display: block;
}
input,
input::placeholder {
color: grey;
}
button {
font-size: 18px;
padding: 15px;
width: 50%;
;
background-color: transparent;
color: #F1EFEE;
border: 3px solid #F1EFEE;
border-radius: 10px;
cursor: pointer;
}
#output {
font-size: 20px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
#moneyOutput {
font-size: 50px;
padding: 5px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick="calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
Related
Trying to give some margin between div.header and div.Main_2, but the div.header overlaps div.Main_2 because of "position: fixed;".
I tried with "margin-bottom: 50px;", but it still remains superimposed.
Is there any way to make the margin with the least possible code, without take out the "position: fixed;"?
CSS:
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
HTML:
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
Since 42 is "the answer to the Ultimate Question of Life, the Universe, and Everything", try setting margin-top:42px; to your class Main_2
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
.Main_2 {
margin-top:42px;
}
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
Or, as suggested in the comment by #KarlenKishmiryan you can also use padding on your body:
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
body {
padding-top:42px;
}
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
If you have a container with position: fixed | absolute. Set in the parent the height to a fixed number and position: relative for it so the space is reserved.
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.container {
height: 42px;
position: relative;
}
<div class="Main_1">
<div class="container">
<div class="header">MyHeader</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</div>
I have a really quick question. I have developed this css and html with the help of a YouTube tutorial as well as the community. However, I do have a problem and I have spent a good hour trying to solve it but have had no luck. When I resize the window, the vertical line in the center of the page (div="splitter") disappears and there is no space on the left-hand side the input fields either. Can someone please explain why?
Also, if you guys would not mind how does my css code look? Is it correct?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
width: 0.5px;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
You have 0.5px width on your splitter. I tried brining it up to 1px, but saw that it did not help. What did seem to work was setting min-width to 1px as well.
Your css looks OK, but I would suggest looking more into how flex-box works, here is a good article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The reason why there is no space on the left side is because you have not set any. Did you perhaps mean to set the margin-left to something instead of padding-left?
Perhaps it happens due to flexbox. I made it work via border. Now it works as expected since border isn't affected by possible dynamic width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
border-left: 1px solid black;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
I have a quick question. How can I move my login form div to the left and have a vertical separator in the center of the page and still be able to place content on the right side of the page as well? What I thought of doing is using display: inline but when I use display: inline in my wrapper div it ruins the setup of the page. Thanks!
Code
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
}
.login-form {
background-color: green;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="splitter"></div>
</div>
</body>
Relatively simple using Flexbox, we don't set a flex value on the div.leftside so it's width stays dependent on the content, the splitter can be represented by a border, however having it being a separate element opens more styling possibilities
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: flex;
height: 100vh;
}
.rightSide {
flex: 1 0 0%;
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
Same can be achieved using CSS Grid
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: grid;
height: 100vh;
grid-template-columns: auto auto 1fr;
}
.rightSide {
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
EDIT :
The way we align stuff inside a flexed container is : align-self on the flex items or aling-items on the flexed container, Now since flexbox only goes in one direction either vertically or horizontally, we change that using flex-direction property, we put one vertically and align the items as we like, then put another one horizontally and align the items as we like.
I tried to make my own example to make it somewhat clean ?
It's better if you would find a course about flexbox, google it or look for it on youtube (which where i learned everything i know)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
.main {
height: 100vh;
background-color: pink;
display: flex;
}
.main>.left {
flex: 1;
display: flex;
background: brown;
}
.main>.left>.form-wrapper {
flex: 1;
background: orange;
padding: 10px;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.left>.form-wrapper>form {
background: #1d1f20;
padding: 10px;
width: 200px;
align-self: flex-end;
}
.main>.left>.form-wrapper>form>input {
margin-bottom: 5px;
width: 100%;
}
.main>.split {
width: 5px;
background: #00ff74;
}
.main>.right {
flex: 1;
background: purple;
display: flex;
}
.main>.right>.welcome {
flex: 1;
background: #2d162d;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.right>.welcome>h2 {
background: #9a7d9a;
align-self: center;
}
<div class="main">
<div class="left">
<div class="form-wrapper">
<form>
<input type="text" placeholder="Name" name="">
<input type="text" placeholder="Email" name="">
<input type="button" value="Done !" name="">
</form>
</div>
</div>
<div class="split"></div>
<div class="right">
<div class="welcome">
<h2>Welcome !</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>
</div>
</div>
I used flex to create what you required. You will have to check the new CSS and HTML(separator and right-side part) to completely understand what I did.
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
display: flex;
justify-content: space-around;
}
.wrapper .login-form,
.wrapper .right-side {
width: 45%;
}
.login-form {
background-color: green;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
color: grey;
width: 100%;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
.separator {
width: 0px;
border: 2px solid black;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="separator"></div>
<div class="right-side">Right side content</div>
</div>
</body>
You should probably look into Flexbox or other options. W3 has a couple of ways to setup a two column layout in their howto article: https://www.w3schools.com/howto/howto_css_two_columns.asp
Also checkout the complete guide to flexbox from css-tricks
I have one simple question :
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-image: url("IMG/tlo.jpg");
background-size: cover;
font-family: "Titillium Web", sans-serif;
}
.top-container {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.42;
margin-top: 1rem;
}
.main-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 1200px;
align-items: center;
align-content: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
margin: 0 -5px;
}
.h2 {
font-size: 2rem;
text-shadow: 1px 2px 2px #2b0100;
color: #FFFFFF;
}
.rf-container {
display: flex;
margin: 0 55px;
width: 380px;
background-color: #f4f4f4;
padding: 20px 20px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.24);
}
.form-rf {
display: flex;
flex-direction: column;
flex: 1;
}
.rf-element {
display:flex;
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
border-radius: 2px;
margin-bottom: 1.25rem;
height: 2.5rem;
width: 340px;
}
.rf-element:hover {
border-color: #88c814;
}
.main-icon {
width: 45px;
flex: 2;
color: #dedede;
font-size: 1.375rem;
text-align: center;
padding-top: 1%;
}
.main_field {
flex: 10;
height: 100%;
border: none;
background-color: #f8f8f8;
font-family: 'Titillium Web', sans-serif;
font-size: 1rem;
color: #afafaf;
padding-left: 3%;
outline: none;
border-style: none;
}
.main_field:focus {
color: #428c42;
box-shadow: 0 0 10px 2px rgba(204,204,204,0.9);
border: 2px solid #a5cda5;
background-color: #e9f3e9;
}
.separator {
display: flex;
width: 5px;
min-height: 100%;
background-color: #dedede;
border-top: 0.1875rem solid #f8f8f8;
border-bottom: 0.1875rem solid #f8f8f8;
}
/* checkbox */
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 0.3125rem;
cursor: pointer;
}
.checkbox-custom-label{
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before{
content: '';
background: #fff;
border: 0.125rem solid #ddd;
display: inline-block;
vertical-align: middle;
width:1.25rem;
height: 1.25rem;
padding: 0.125rem;
margin-right: 0.625rem;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "";
background: #428c42;
}
/* checkbox end */
.main_green_button {
margin-top: 0.5rem;
width: 100%;
border: 0.0625rem solid #3b9a00;
border-radius: 0.125rem;
font-size: 1.5rem;
font-family: 'Titillium Web', sans-serif;
color: #FFFFFF;
text-shadow: 0.0625rem 0.0625rem #51850e;
background: linear-gradient(#a3d840, #73b618);
height: 3rem;
box-shadow: 0.0625rem 0.0625rem 0.0625rem 0px #FFFFFF;
cursor: pointer;
}
.main_green_button:hover {
background: linear-gradient(#AAE650, #7DC323);
}
.main_green_button_smaller {
height: 2.1875rem;
font-size: 1rem;
width: 45%;
}
.main_green_button_smaller-disabled {
opacity: 0.5;
cursor: no-drop;
}
.main_green_button_smaller-warning {
background: linear-gradient(#f65e70, #f03747);
border: 1px rgba(209, 18, 18, 0.616);
}
.main_green_button_smaller-warning:hover {
background: linear-gradient(#FF697D, #FA4155);
}
/* button end */
/* text area*/
.textarea {
width: 100%;
margin-bottom: 1.25rem;
background-color: #f8f8f8;
border: 0.0625rem solid #c6c6c6;
border-radius: 1.5px;
font-family: 'Titillium Web', sans-serif;
font-size: 1rem;
color: #afafaf;
resize: none;
}
.doublebtn {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.5;
}
.footer_top {
margin: 3.125rem 0px 0.5rem 0px;
}
/* MEDIA*/
#media only screen and (max-width: 945px) {
.main-container {
max-height: 3100px;
}
}
#media only screen and (max-width: 480px) {
.main-container {
margin: 0 auto;
}
.rf-container {
margin: 0 auto;
}
.rf-element {
}
.main_field {
}
.doublebtn {
}
}
<section class="main-container">
<!-- REGISTER FORM -->
<h2 class="h2">Register Form</h2>
<div class="rf-container">
<form action="" class="form-rf">
<!-- REGISTER FORM / 1 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="text" name="username"placeholder="Username" onfocus="this.placeholder=''" onblur="this.placeholder='Username'" required>
</div>
<!-- REGISTER FORM / 2 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="password" name="password"placeholder="Password"
onfocus="this.placeholder=''" onblur="this.placeholder='Password'" required>
</div>
<!-- REGISTER FORM / 3 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="password" name="Confirm Password"placeholder="Confirm Password" onfocus="this.placeholder=''" onblur="this.placeholder='Confirm Password'" required>
</div>
<!-- REGISTER FORM / 4 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="email" name="Email"placeholder="Email" onfocus="this.placeholder=''" onblur="this.placeholder='Email'" required>
</div>
<!-- REGISTER FORM / 5 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<select class="main_field" name="location" required>
<option value="" disabled selected>Your Location</option>
<option value="gdansk">Gdańsk</option>
<option value="krakow">Kraków</option>
<option value="poznan">Poznań</option>
<option value="warszawa">Warszawa</option>
<option value="wroclaw">Wrocław</option>
</select>
</div>
<!-- REGISTER FORM / 6 row -->
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" >
<label for="checkbox-1" class="checkbox-custom-label">I have read and accept the terms of use.</label>
<!-- REGISTER FORM / sign in -->
<input class="main_green_button" type="submit" value="Sign up">
</form>
</div>
</section>
codepen all
when I try make responsive,u see that forms do not fit on the page.
In fact, no element is responsive despite the use FLEXBOX.
I tried to combine using values flex: 1 1 auto; or flex: 1 1 80% an excuse for .main-field input .
In short - I would like to receive responsive forms, but at the moment I have no idea how to deal with it.
I was trying to make a simple circle buttons to represent pizza size buttons but I'm having trouble centering the text if anyone has a solution, you can text it out your self I've tried using
padding, stretches circle as well
margin, no response
Not sure what I'm doing wrong, thanks
.pizzaOptions {
margin: 1em;
padding-top: 1%;
width: 60%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-self: center;
align-content: space-between;
}
input {
opacity: 0;
}
.size {
display: inline-block;
margin: 1em;
height: 100px;
width: 100px;
border: 15px #333 solid;
border-radius: 50%;
margin: auto;
}
span {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
}
#small {
font-size: 1em;
width: 100px;
height: 100px;
}
#medium {
margin: 20px;
font-size: 1.5em;
width: 150px;
height: 150px;
}
#large {
font-size: 2em;
width: 200px;
height: 200px;
}
<div class="pizzaOptions">
<label class="hover size" for="c1" id="small">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
</label>
<label class="hover size" for="c2" id="medium">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
</label>
<label class="hover size" for="c3" id="large">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
</label>
</div>
Try the following code using flexbox:
.pizzaOptions {
margin: 1em;
padding-top: 1%;
width: 60%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-self: center;
align-content: space-between;
}
input {
opacity:0;
position:absolute;
}
.size {
margin: 1em;
height: 100px;
width: 100px;
border: 15px #333 solid;
border-radius: 50%;
margin: auto;
}
span {
text-align: center;
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
width:100%;
}
label {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#small {
font-size: 1em;
height: 100px;
width: 100px;
}
#medium {
margin: 20px;
font-size: 1.5em;
height: 150px;
width: 150px;
}
#large {
font-size: 2em;
height: 200px;
width: 200px;
}
<div class="pizzaOptions">
<label class="hover size" for="c1" id="small">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
</label>
<label class="hover size" for="c2" id="medium">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
</label>
<label class="hover size" for="c3" id="large">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
</label>
</div>
Amend display property of span
#span{
display:block;
}
As table-cell behave improper alignment when used other that table. It doesn't obey other rules like vertical-align , float etc.