I'm working for the first time with flexbox but I've got an internet explorer problem.
In chrome it looks good. But in internet explorer everything is aligned to the right. How could I fix this?
I already tried to add a default height and min-height described here but not working :(
Any ideas?
.column {
max-width: 1000px;
margin: auto;
}
.row {
display: flex;
}
.panel {
padding: 10px;
width: 100%;
background: #fff;
margin-bottom: 50px;
border: 1px solid #eaeaea;
}
.center {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.column-small {
max-width: 350px;
margin: auto;
}
.brand {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: #f5f5f1;
color: #002e5b;
width: 100%;
height: 50px;
}
.form-group-item {
width: 100%;
border-radius: 4px;
border: 1px solid #f2f2f2;
font-size: 15px;
box-shadow: none;
outline: none;
line-height: 1.5em;
margin-top: 10px;
margin-bottom: 10px;
height: 45px;
text-indent: 5px;
}
.btn-main {
border: none;
border-radius: 5px;
font-weight: 500;
font-size: 16px;
background: #002e5b;
color: #fff;
padding: 10px 45px;
}
.full-width {
width: 100%;
}
<div class="column">
<div class="row">
<div class="panel center">
<div class="column-small">
<div class="brand">
Login
</div>
<form>
<input name="email" class="form-group-item" autofocus="autofocus" required="required" type="email" placeholder="Email">
<input name="password" class="form-group-item" required="required" type="password" placeholder="Wachtwoord">
<button class="btn-main full-width" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
I fixed it by removing margin: auto on .column-small.
Related
Just trying to evenly space my text and search bar and also center them horizontally in my navbar. I've manage to center the text and space them out but having trouble centering the search bar horizontally.
Any help would be great!
<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>
.TopNav{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-around;
}
.TopNav h1{
padding-left: 200px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
font-size: 4rem;
}
.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 500px;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}
.TopNav {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
flex: 1 1 10px;
max-width: 80%;
margin: 0 auto;
align-items: center;
}
.TopNav h1{
padding-left: 0px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
max-width: 40%;
font-size: 2rem;
}
.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 60%;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
max-width: 250px;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}
<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>
I am trying to move this form but it keeps 'hitting' the h3 tag and the button. I want to move them around without them interfering with one another.
I am talking about the gray panel:
Even when resizing the window, they interact and push one another.
I have tried using margin and padding, but that doesn't seem to work.
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, 0.2);
}
.section-3 .heading_section_3 {
font-size: 20px;
position: absolute;
bottom: 70%;
}
.description {
position: absolute;
color: #6e6e6e;
padding-left: 200px;
padding-right: 200px;
}
.join-right-side {
overflow: auto;
background-color: #c9c8c8;
position: absolute;
height: 300px;
padding: 30px;
margin-left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.Join-left-side {
overflow: auto;
position: absolute;
height: 300px;
padding: 30px;
background-color: #f5f5f1;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.text-join-left {
color: black;
text-align: center;
padding-left: 200px;
padding-right: 200px;
}
.form {
height: fit-content;
overflow: hidden;
}
input[type="email"] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono, Roboto Mono, monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
<div class="section-3">
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
</div>
I think it could be linked to the way I'm accessing the div classes, or to the structure of the div's.
You can try:
CSS
.section-3 {
display:flex;
justify-content: space-between;
}
.join-left-side , .join-right-side {
width : 50%;
height: 300px;
}
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, .2);
}
.section-3 .heading_section_3 {
font-size: 20px;
}
.description {
color: #6e6e6e;
}
.join-right-side {
background-color: #c9c8c8;
height: 300px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.join-left-side {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.form{
height: fit-content;
overflow: hidden;
}
input[type=email] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono,Roboto Mono,monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
HTML
<div class="section-3">
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
</div>
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 1 year ago.
https://jsfiddle.net/cje0nuq1/
HTML
<form action="" class="form">
<div class="form-input-wrap">
<div class="form__header">Leave a review</div>
<div class="input-area">
<label>Name</label>
<input type="text" name="name">
</div>
<textarea class="text-input"></textarea>
</div>
<input type="submit" value="Publish">
</form>
CSS
:root {
--first-color: rgb(250, 250, 250);
--second-color: rgb(255, 102, 102);
--third-color: rgb(255, 74, 74);
}
.form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif!important;
margin: 0 auto;
width: 650px;
min-height: 200px;
background: var(--first-color);
color: #000;
padding: 5%;
border: thin solid #ccc;
}
.form__header {
margin: 0 auto;
color: var(--third-color);
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}
.form-input-wrap {
width: 60%;
}
.input-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: thin solid #ccc;
width: auto;
}
.input-area label {
width: 150px;
font-size: 20px;
color: var(--third-color);
}
.input-area input {
border: thin solid #ccc;
height: 22px;
}
.input-area input:focus {
outline: none!important;
}
.text-input {
resize: none;
width: 90%;
min-height: 100px;
}
.text-input:focus {
outline: none;
}
.form input[type="submit"] {
width: auto;
margin: 0 auto;
background: var(--third-color);
color: #fff;
border: none;
border-radius: 15px;
padding: 5px;
margin-top: 15px;
}
.form input[type="submit"]:hover {
background: darkred;
cursor: pointer;
}
How to make .input-area container take the exact same amount of space that its childs take?
Apply width:fit-content:
.form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif!important;
margin: 0 auto;
width: 650px;
min-height: 200px;
background: var(--first-color);
color: #000;
padding: 5%;
border: thin solid #ccc;
}
.form__header {
margin: 0 auto;
color: var(--third-color);
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}
.form-input-wrap {
width: 60%;
}
.input-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: thin solid #ccc;
width: fit-content;
}
.input-area label {
width: 150px;
font-size: 20px;
color: var(--third-color);
}
.input-area input {
border: thin solid #ccc;
height: 22px;
}
.input-area input:focus {
outline: none!important;
}
.text-input {
resize: none;
width: 90%;
min-height: 100px;
}
.text-input:focus {
outline: none;
}
.form input[type="submit"] {
width: auto;
margin: 0 auto;
background: var(--third-color);
color: #fff;
border: none;
border-radius: 15px;
padding: 5px;
margin-top: 15px;
}
.form input[type="submit"]:hover {
background: darkred;
cursor: pointer;
}
<form action="" class="form">
<div class="form-input-wrap">
<div class="form__header">Leave a review</div>
<div class="input-area">
<label>Name</label>
<input type="text" name="name">
</div>
<textarea class="text-input"></textarea>
</div>
<input type="submit" value="Publish">
</form>
to include Firefox, i would use max-contentinstead fit-content in place width:auto;that you have set for .input-area.
.form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif!important;
margin: 0 auto;
width: 650px;
min-height: 200px;
background: var(--first-color);
color: #000;
padding: 5%;
border: thin solid #ccc;
}
.form__header {
margin: 0 auto;
color: var(--third-color);
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}
.form-input-wrap {
width: 60%;
}
.input-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: thin solid #ccc;
width:max-content;
}
.input-area label {
width: 150px;
font-size: 20px;
color: var(--third-color);
}
.input-area input {
border: thin solid #ccc;
height: 22px;
}
.input-area input:focus {
outline: none!important;
}
.text-input {
resize: none;
width: 90%;
min-height: 100px;
}
.text-input:focus {
outline: none;
}
.form input[type="submit"] {
width: auto;
margin: 0 auto;
background: var(--third-color);
color: #fff;
border: none;
border-radius: 15px;
padding: 5px;
margin-top: 15px;
}
.form input[type="submit"]:hover {
background: darkred;
cursor: pointer;
}
<form action="" class="form">
<div class="form-input-wrap">
<div class="form__header">Leave a review</div>
<div class="input-area">
<label>Name</label>
<input type="text" name="name">
</div>
<textarea class="text-input"></textarea>
</div>
<input type="submit" value="Publish">
</form>
I have this setup https://codepen.io/saraLance/pen/LYGevXW and I have a couple of problems.
the header covers more than the parent width.
Scroll works weird, it seems to stop after the button play, and then I have to scroll again.
I have tried to fix the scroll problem making the header fixed position: fixed; width: 100% but the header covers more than the parent div.
I also have no idea why screen height it's not the same that it's parent screens.
Ideally sit-container should be after header and header should be fixed.
div {
width: auto;
}
.screens {
background: green;
height: 100vh;
display: flex;
overflow-x: hidden;
overflow-y: auto;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1 {
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
</body>
</html>
screens class should be width: auto and overflow-x:hidden should be on button-section
See output in full screen
div {
width: auto;
}
#media (min-width: 768px) {
width:35%;
margin:auto;
}
.screens {
background: green;
height:"auto";
display: flex;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
#media (min-width: 768px) {
width: 35vw;
}
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1{
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section{
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
overflow-x:hidden;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
.quantbutton {
height: 35px;
width: 35px;
padding-bottom: 1px;
margin-bottom: 3px;
font-weight: 600;
font-family: Raleway;
color: white;
background-color: #AA95B9;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
display: -webkit-flex;
display: inline-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
vertical-align: middle;
}
#ppqty {
text-align: center;
border: 1px solid black;
border-radius: 5px;
background-color: #C0B9C7;
height: 35px;
font-weight: 700;
vertical-align: middle;
box-sizing: border-box;
}
<div id="qtyWrap">
<div class="quantbutton" onclick="downQuant();">
<
</div>
<input type="text" size="1" maxlength="1" value="1" name="qty" id="ppqty"/>
<div class="quantbutton" onclick="upQuant();">
>
</div>
</div>
I have a form element for quantity, with two "buttons" on either side of the field which increment and decrement the value inside the box. Despite my best efforts, I can't seem to align it properly, there's always a vertical offset.
How do I make the form element height equal to that of the buttons, and have it aligned so the top of the form element meets the top of the "buttons" on either side?
You have some margin-bottom: 3px; on your divs, you have to add it to the input as well:
(vertical-align: top; instead does work as well)
.quantbutton {
height: 35px;
width: 35px;
padding-bottom: 1px;
margin-bottom: 3px;
font-weight: 600;
font-family: Raleway;
color: white;
background-color: #AA95B9;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
display: -webkit-flex;
display: inline-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
vertical-align: middle;
}
#ppqty {
text-align: center;
border: 1px solid black;
border-radius: 5px;
background-color: #C0B9C7;
height: 35px;
font-weight: 700;
vertical-align: middle;
box-sizing: border-box;
}
<div id="qtyWrap">
<div class="quantbutton" onclick="downQuant();">
<
</div>
<input type="text" size="1" maxlength="1" value="1" name="qty" id="ppqty"/>
<div class="quantbutton" onclick="upQuant();">
>
</div>
</div>
for #ppqty css
try vertical-align: top;
like this
#ppqty{
vertical-align: top;
}