.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;
}
Related
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>
This question already has answers here:
Position DIV relative to another DIV?
(4 answers)
Closed 2 years ago.
I am designing a product card, and I want to have the delete button be a round button with the X in the upper right corner of the product's photo.
I usually would use position absolute to achieve this floating effect, but considering this is an element that will be dynamically created for different products, I need some way of styling it that is relative to the parent element, as I don't know the position of each product card. I don't think I can use position absolute, as it would be a different position for every product card.
Any Ideas?
HTML
<div class="cart-card">
<span class="delete-button">
<i class="fas fa-times"></i>
</span>
<div class="cart-img-cont">
<img src="" alt="" class="cart-img" />
</div>
<p class="cart-card-product-name h-font">Product Name</p>
<div class="cart-card-price">
<p class="cart-price">$15.00</p>
<p class="cart-merchant">
<span class="cart-from">From</span> Merchant Name
</p>
</div>
<div class="cart-card-qty-cont"></div>
<div class="cart-opt-cont">
<p class="opt-name">Option:</p>
<select name="" id="" class="opt-select">
<option value="#">Option</option>
</select>
</div>
</div>
CSS
.cart-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;
padding-bottom: 10px;
}
.cart-img-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid $gray;
padding: 10px;
border-radius: 10px;
margin: 0px auto;
width: 100%;
height: 272px;
}
.delete-button {
background-color: $orange;
border-radius: 50%;
height: 36px;
width: 36px;
color: white;
text-align: center;
padding-top: 1.5px;
font-size: 28px;
position: absolute;
}
.cart-img {
height: 100%;
width: auto;
}
.cart-card-product-name {
font-size: 18px;
font-weight: 700;
margin: 5px 0;
}
.cart-card-price {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cart-price {
border-right: 1px solid $gray;
color: $orange;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-merchant {
color: $blue;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-from {
color: black;
font-weight: 600;
}
.cart-card-qty-cont {}
.cart-opt-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.opt-name {
padding-right: 10px;
font-size: 18px;
}
.opt-select {
width: 170px;
height: 45px;
border-radius: 5px;
border: 1px solid $gray;
padding: 5px;
font-size: 18px;
background: white;
}
Like this:
Are you looking for something like this? You can modify the below as per your requirements:
.cart-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;
padding-bottom: 10px;
background: lightgrey;
}
.cart-img-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid $gray;
padding: 10px;
border-radius: 10px;
margin: 0px auto;
width: 100%;
height: 272px;
}
.delete-button {
background-color: $orange;
border-radius: 50%;
height: 36px;
width: 36px;
color: white;
text-align: center;
padding-top: 1.5px;
font-size: 28px;
position: absolute;
}
.cart-img {
height: 100%;
width: auto;
}
.cart-card-product-name {
font-size: 18px;
font-weight: 700;
margin: 5px 0;
}
.cart-card-price {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cart-price {
border-right: 1px solid $gray;
color: $orange;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-merchant {
color: $blue;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-from {
color: black;
font-weight: 600;
}
.cart-card-qty-cont {}
.cart-opt-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.opt-name {
padding-right: 10px;
font-size: 18px;
}
.opt-select {
width: 170px;
height: 45px;
border-radius: 5px;
border: 1px solid $gray;
padding: 5px;
font-size: 18px;
background: white;
}
.close {
position: absolute;
top: 0;
right: 0;
background: red;
color: white;
font-size: 24px;
border-radius: 50px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-family: cursive;
}
<div class="cart-card">
<span class="delete-button">
<i class="fas fa-times"></i>
</span>
<div class="cart-img-cont">
<img src="" alt="" class="cart-img" />
</div>
<p class="cart-card-product-name h-font">Product Name</p>
<div class="cart-card-price">
<p class="cart-price">$15.00</p>
<p class="cart-merchant">
<span class="cart-from">From</span> Merchant Name
</p>
</div>
<div class="cart-card-qty-cont"></div>
<div class="cart-opt-cont">
<p class="opt-name">Option:</p>
<select name="" id="" class="opt-select">
<option value="#">Option</option>
</select>
</div>
<div class="close">X</div>
</div>
I am working a web page for my wife and adding a PayPal checkout button, although not using their standard button. For some reason, this code works when I put it into a WordPress block, but not when I view the page in a browser? Tried multiple browsers.
.text-sizing {
font-size: 12px;
text-align: center;
padding: 0rem;
display: flex;
align-items: center;
}
.btn-wrapper {
text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
.btn {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:#400779;
background: white;
font-size: 7px;
cursor: pointer;
}
.btn:hover,
.btn:active {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:white;
background: #400779;
font-size: 7px;
cursor: pointer;
}
<div class="btn-wrapper">
<div class="btn-wrapper">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXXXx">
<input type="submit" class="btn" value="Preorder Signed Copy">
</form>
</div>
</div>
So apparently I was using the wrong CSS tags. It should be 'input [type=XXX]'
<style>
input { text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
.input-wrapper {
text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
input[type=submit], input[type=submit]:active, input[type=submit]:focus {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:#400779;
background: white;
font-size: 7px;
cursor: pointer;
}
input[type=submit]:hover {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:white;
background: #400779;
font-size: 7px;
cursor: pointer;
}
</style>
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.