I create simple inline form with flex.
But in safari I found a bug - button lose width, here is screenshot:
In all another browsers all good.
How to fix this bug in safari ?
PS: I can`t set fixed width on button.
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="" class="form-inline-flex">
<div>
<input type="text" />
</div>
<button type="submit" />Subscribe</button>
</form>
</div>
</div>
</div>
.form-inline-flex{
display: -ms-flexbox;
display: -webkit-flex ;
display: flex;
}
button{
display:inline-block;
padding: 13px 28px;
font-weight: 700;
text-align: center;
cursor: pointer;
border: 1px solid transparent;
padding: 13px 20px;
font-size: 16px;
line-height: 1.375;
}
input{
display: block;
width: 100%;
font-size: 14px;
padding: 7px 18px;
line-height: 34px;
color: #000;
border: 1px solid #d2d1d1;
}
CodePen
Add this to your button:
button {
…
flex: none;
}
Related
I'm working on a website that has been partially constructed.
I came across this code which displays a button without the href
<div class="practices__btn"><button>Learn More</button></div>
I've tried to fix it with the following code but find that it breaks the CSS.
<button class="practices__btn">Learn More</button>
Here is the CSS code.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
This is the code that the button should fit into
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<button class="practices__btn">Learn More</button>
</div>
I appreciate the help. I can't find the problem yet it seems simple.
I don't think using an anchor tag (<a>) on a button is the best practice. My advice is to make it a form instead, then add an action to it.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<div class="practices__btn">
<form action="https://example.com">
<button type="submit" class="practices__btn">Learn More</button>
</form>
</div>
</div>
</div>
</div>
I am creating a footer in HTML/CSS and I am trying to create an email form at the bottom of the footer. I have already created the button and form itself; however, the wording on the button does not appear.
Here is my HTML code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.footer-container {
background-color: #212329;
padding-bottom: 20px;
width: 80%;
height: 40vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.footer-container h4 {
color: #fff;
text-align: left;
text-shadow: 0.5px 0.5px gray;
}
.footer-container h6 {
color: #fff;
text-shadow: 0.5px 0.5px gray;
}
.footer-heading {
display: flex;
flex-direction: column;
margin-right: 4rem;
}
.footer-heading h6 {
color: #fff;
margin-bottom: 2rem;
}
.footer-heading a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-heading a:hover {
color: darkgoldenrod;
transition: 0.5s ease-in-out;
}
.email-form h4 {
margin-bottom: 2rem;
}
#footer-email {
width: 250px;
height: 40px;
border-radius: 4px;
outline: none;
border: none;
padding-left: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
#footer-email::placeholder {
color: #b1b1b1;
}
#footer-email-btn {
width: 100px;
height: 40px;
border-radius: 4px;
background-color: darkred;
outline: none;
border: none;
color: #fff;
font-size: 1rem;
}
#footer-email-btn:hover {
cursor: pointer;
background-color: darkgoldenrod;
transition: all 0.4s ease-in-out;
}
<section class="footer-container">
<h4>Golden Lion Insurance Services</h4>
<div class="footer-heading">
<h6>About Golden Lion</h6>
About Rose
Rose Income Tax Services
</div>
<div class="footer-heading">
<h6>Services</h6>
Auto
Home
Truck
Health
Commercial
Life
Bonds
Annuities
</div>
<div class="footer-heading">
<h6>Resources</h6>
Blog
</div>
<div class="footer-heading">
<h6>Contact Us</h6>
</div>
<div class="footer-heading"></div>
<div class="email-form">
<h4>Get Your Latest Insurance Tips from Us!</h4>
<input type="email" placeholder="Enter your email here" id="footer-email">
<button type="submit" value="Sign Up!" id="footer-email-btn"></button>
</div>
</section>
Perhaps I may have missed some coding on the CSS, but the wording "sign up!" doesn't appear when I launch the code on my browser (I am using the current version of Google Chrome). Any help or pointers?
Thanks again!
The Problem seems to be in your HTML file on the 3rd line from the bottom.
When you declare a button, you need to mention some innerText in it.
For Example: <button> innerText </button>
Similarly for your code:
<button type="submit" value="Sign Up!" id="footer-email-btn">Sign Up!</button>
No worries, you only need to add some text inside the bottom tag.
Update your HTML button tag as the following
<button type="submit" value="Sign Up!" id="footer-email-btn">Submit</button>
I'm making an email form where people can submit their emails and be part of an email list, in order to do this I have made an input and a button that go side by side. The issue that I am getting is that even though the button and inputs are the exact same height, and should be aligned horizontally perfectly it instead has a pixel difference with the button being a pixel higher than the input. How can I fix this?
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" /><button type="submit" class="submit"><p>Sign up</p></button>
</form>
</div>
If you change
<p>Sign up</p>
To
<div>Sign up</div>
Or just
Sign up
It should work.
There's a bunch of margin settings on the <p> element that are overflowing and messing up your alignment.
Just remove p tag around the Sign up text.
<button type="submit" class="submit">Sign up</button>
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" />
<button type="submit" class="submit">Sign up</button>
</form>
</div>
I want to align those two buttons (Login and Registrar) at the same level but as they are different forms "Registrar" button is being placed on the "next line".
Here is the issue, visually:
Here is the code:
HTML
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
</form>
<form action="registro.html" method="GET">
<input type="submit" id="register" value="Registrar">
</form>
</section>
CSS:
header > section.header_form_login{
font-weight: 500;
align-items: right;
padding: 5px;
margin: auto;
margin-right: 20px;
}
header > section.header_form_login > form > input#user{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
header > section.header_form_login > form > input#pass{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: flex;
float: right;
margin-top: 10px;
}
Thanks a lot!!!
PD: Feel free to give me recommendations, I'm kinda new to html and css coding.
I need help with html and css, specifically, with buttons being placed at the same level vertically but from different forms
Update: Refactored CSS to share styles.
I would restructure your HTML and fix your CSS to get things working properly. Also, when using ids, they are meant to be unique, so there's no need for a long lookup query such as:
header > section.header_form_login > form > input#login { … }
Just use
#login { … }
To make the "buttons" align, I made the register input a link. This is pretty standard. Then I added some CSS to align these elements on the same line.
.form-buttons {
display: flex;
flex-wrap: nowrap;
}
Here is how I could restructure your markup and styles.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header_form_login {
font-weight: 500;
padding: 5px;
margin: auto;
width: 250px;
max-width: 100%;
}
#user,
#pass {
width: 100%;
padding: 5px;
border: 1px solid lightgray;
}
/* BUTTONS */
#login,
#register {
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
text-align: center;
flex: 1;
}
#login {
margin-right: 2.5px;
}
#register {
margin-left: 2.5px;
}
.form-buttons {
padding-top: 10px;
display: flex;
flex-wrap: nowrap;
}
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass">Contraseña:</label>
<input type="text" id="pass" name="pass">
<div class="form-buttons">
<input type="submit" id="login" value="Login">
Register
</div>
</form>
</section>
jsFiddle
I don't generally like there being two forms in the same place to drive 2 actions. Assuming that you don't need username and password sending to your register page, then I would implement as follows:
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
Registrar
</form>
</section>
CSS for Buttons:
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;