I'm making a simple calculator page but I'm having a lot of trouble aligning the buttons the way I would like. I have all of my buttons inside of a div which is already the width I want each row of buttons to be. My problem is that no matter how I try to do the margins or the buttons either have extra room on the right side and they don't line up with the right side of the viewport or they are too big and they overflow onto the next line. I'm sure there is a simple solution to this but I'm too much of a beginner to see it. :(
Currently my CSS for the button container and buttons is as follows:
#buttons {
width:525px;
margin-left: 25px;
margin-top: 10px;
}
button {
width: 110px;
height: 110px;
border: 2px solid black;
border-radius: 20px;
margin: 10px 0px 0px 0px;
}
Codepen here.
Try width: 33% on the buttons. It tells the browser to use (roughly) 1/3rd if the available space for each button.
Flex box is worth learning.
Changes are noted with /**/ in the CSS.
Full example, https://codepen.io/anon/pen/LOZEPp
CSS
body {
background-color: #141414;
font-family: 'Rubik', sans-serif;
display: flex; /**/
justify-content: center; /**/
padding: 0; /**/
margin: 0; /**/
}
#calc-main {
background-color: #607466;
width: 550px; /**/
height: 700px; /**/
border: 3px solid black;
border-radius: 20px;
display: flex; /**/
flex-direction: column; /**/
justify-content: space-around; /**/
}
#calc-brand {
flex: 1; /**/
background: yellow;
text-align: center;
padding: 0; /**/
margin: 10px; /**/
}
#calc-viewport {
flex: 1; /**/
margin: 10px; /**/
font-size: 2em;
background-color: #D4D2A5;
padding: 0.25em; /**/
text-align: right;
border: 2px solid black;
border-radius: 20px;
}
#buttons {
margin: 10px; /**/
flex: 16; /**/
background: orange; /**/
display: flex; /**/
flex-direction: column; /**/
align-items: center; /**/
padding: 5px; /**/
}
.button-row { /**/
flex: 1; /* important */
background: yellow;
width: 100%; /**/
margin: 5px; /**/
display: flex; /**/
flex-direction: row; /**/
justify-content: space-between; /**/
}
button {
flex: 1; /* important */
max-width: 110px; /**/
max-height: 110px; /**/
border: 2px solid black;
border-radius: 20px;
margin: 10px; /**/
}
HTML
<body>
<div id='calc-main'>
<h1 id='calc-brand'>JAVASCRIPT CALCULATOR</h1>
<div id='calc-viewport'>
<p id='main-output'>0</p>
<p id='secondary-output'>0</p>
</div>
<div id=buttons>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
</div>
</div>
</body>
Try This:
.wrapper {
border: 1px solid #000;
text-align: center;
display: inline-block;
background-color: #607466;
}
.result {
margin:10px 20px;
}
input {
height: 20px;
border: 1px solid;
outline: none;
width: 100%;
background: yellow;
}
span {
background: #AAA;
width: 60px;
height: 60px;
display: inline-block;
margin: 0 20px 10px 10px;
line-height: 60px;
float: left;
cursor: pointer;
background: #FFF;
border: 1px solid;
}
span:hover {
background-color: #AAA;
}
.result ~ p {
padding-left: 10px;
clear: both;
}
<div class="wrapper">
<p class="result"><input type="text" name="result"></p>
<p><span>AC</span><span>CE</span><span>/</span><span>*</span></p>
<p><span>7</span><span>8</span><span>9</span><span>-</span></p>
<p><span>4</span><span>5</span><span>6</span><span>+</span></p>
<p><span>1</span><span>2</span><span>3</span><span>=</span></p>
<p><span>0</span><span>.</span><span>Invisible</span></p>
<br style="clear: both">
</div>
Related
I have a button which I want it to centered but the position should be right of the footer. I have the done the CSS of footer section but the button is sticking to the bottom. I want it in center like I want the button to move upwards so that it looks like it is positioned perfectly:
Here is the screenshot:
I want it in the center like this:
Here is my code of ReactJS:
.footer__section {
position: sticky;
color: lightgray;
display: flex;
align-items: right;
padding: 30px;
bottom: 0;
border-top: 1px solid gray;
}
.footer__section>form {
flex: 1;
}
.chat__inputButton {
position:absolute;
right: 0;
margin-right: 10px;
}
<div className="footer__section">
<form>
<button
className="chat__inputButton"
type="submit"
>
Send Message
</button>
</form>
</div>
.footer__section {
position: sticky;
color: lightgray;
display: flex;
align-items: right;
justify-content:right;
padding: 30px;
bottom: 0;
border-top: 1px solid gray;
border: 1px red solid; // debug
}
.footer__section>form {
flex: 1;
display: flex;
width: 100%;// <-
align-items: flex-end;
justify-content: flex-end;
}
.chat__inputButton {
margin-right: 10px;
}
<div class="footer__section">
<form>
<button
class="chat__inputButton">Cancel</button>
<button
class="chat__inputButton"
type="submit"
>
Send Message
</button>
</form>
</div>
how can I do so that the button is not hidden when resizing the modal?
I'm having trouble solving this problem can someone help me?
I believe it must be simple to solve, I just couldn't find the solution yet
below is the JSX code (React) and CSS code
if you look at the image you will be better able to understand the problem
JSX (React) code below:
<Modal open={this.props.open} visible={this.props.visible}>
<div class={style.Container}>
<div class={style.Header}>
<div class={style.Title}>{data.subject}</div>
<div
class={style.Buttons2}
onClick={(event) => this.props.visible(false)}
>
<MdBackspace size="24px" color="#FFF" />
</div>
</div>
<form onSubmit={this.handleSubmit} class={style.Wrapper}>
<div class={style.Message}>
{ReactHtmlParser(this.state.message)}
</div>
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
</div>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</form>
</div>
</Modal>
CSS code below:
.Container {
width: 720px;
display: flex;
flex: 1 1 100%;
flex-direction: column;
background: #f9f9f9;
border-radius: 5px;
border: 2px solid #405c77;
resize: both;
overflow: auto;
}
.Header {
width: 100%;
display: flex;
justify-content: space-between;
background: #405c77;
padding: 20px;
flex-wrap: wrap;
}
.Title {
color: #fff;
font-weight: 700;
font-size: 16px;
}
.Wrapper {
/* flex: 1 1 100%; */
height: 100%;
display: grid;
/* grid-template-rows: 60% 30% 40px; */
grid-template-rows: minmax(5px, 1fr);
}
.Message {
/* height: 100%; */
margin: 10px;
padding: 10px;
display: grid;
border-radius: 5px;
overflow-y: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.111);
}
.Editor {
height: calc(30% - 40px);
/* height: 100%; */
margin: 10px;
}
textarea {
width: 100%;
height: 160px;
resize: none;
padding: 5px;
}
.Buttons2 {
cursor: pointer;
background-color: transparent;
outline: none;
border: none;
}
.SendButton {
display: flex;
justify-content: flex-end;
align-items: center;
height: 30px;
cursor: pointer;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
background: rgba(64, 92, 119, 0.8);
transition: all 0.1s ease-in-out;
color: #fff;
}
.SendButton:hover {
transition: all 0.1s ease-in-out;
background: rgba(64, 92, 119, 0.999);
}
.ButtonDisabled {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
height: 30px;
background: red;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
color: #fff;
}
.Controls {
/* height: 40px; */
/* height: 100%; */
display: flex;
flex: 1 1 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.Controls input {
margin-top: 12px;
cursor: pointer;
padding: 12px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
}
Maybe try putting your button inside the Editor div?
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</div>
Its difficult without being able to inspect it properly
try this:
{
position:fixed;
top:0;
z-index:5;
}
I'm trying to create a simple calculator using only HTML and CSS for the layout and, eventually, pure JavaScript for the functions.
I want the site/page to be responsive which is why I am using CSS Grid and no absolute units; % and fr instead of px...
The calculator itself should be a grid of centred squares with the text in the buttons centred both horizontally and vertically and all of the buttons should fit within the "calculator".
<html>
<body>
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
</body>
</html>
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
width: 100%;
height: 0;
padding: 50%;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
Codepen
The calculator div does not appear to be high enough to hold the buttons and the bottom row of the grid therefore overlaps and bleeds outside of the calculator.
I tried playing around with the height of the calc div (height: 100% ...) but the last row always goes over...
I can't seem to get the text inside the button to centre properly; especially horizontally. The '+ / -' button is a good example. I've set the text-align as center and both the justify-items and align-items are center. I know those last two refer to the button items themselves within the grid. But I can't see where else to get the text to centre properly.
I'm hoping this is something outright simple and I've just been staring at the same code, over and over again, for oh too many hours.
If you would rather not correct my code and prefer to point me to any online examples or explanations which would help I will gladly do my homework.
Thanks!
The issue is the grid-gap:2%. It's working for horizontally because we can resolve the 2% based on the width but for the height it won't work since there is no height defined. Basically, the browser is first calculation the height without the gap, then the gap is addedd.
You should consider px or another unit like vw/vh for this one. I have also changed the way you are centring the button. (Centering in CSS Grid)
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 1vw;
padding: 1vw; /*make the padding the same*/
}
div.calc>button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
/*to center*/
display: flex;
align-items: center;
justify-content: center;
/**/
}
/*keep the ratio*/
div.calc>button:before {
content: "";
display: inline-block;
padding-top: 100%;
}
/**/
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Alternative solution with flexbox method with three column button box. I hope this will be helpful for you.
* {
box-sizing: border-box;
position: relative;
}
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
/* display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center; */
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
height: 0;
padding: 12%;
flex-grow: 1;
width: 31%;
height: 31%;
margin: 5px;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
shouldn't the flex items of the .center-section-container be closer together when this property is use? they doesn't seem to be affected all.
i'm using flex wrap so the items are now in different lines but two far away to each other, I would like them to be closer on the cross axis.
here is what i have done:
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.center-section-container>* {
border: solid yellow;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h2>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
I am not 100% sure if you mean this, but in order to have less vertical distance between the flex items, you need to remove the default margin of the h1 and h4 tags (BTW, you have a typo in the closing h2/h4 tag).
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
I added margin: 0 to the child elements which moves them closer together. This alone would align the flex items at the top of their container, and I understood you want them in the vertical middle, so I also added / changed align-content: center; for the container. HTH
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h4>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
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.