That. How can i align this button with the inputs. I try with percentage but only work in a specific screen. And I am using flexbox in this case, i dont know if is that
.Contact-form{
display: flex;
align-items: center;
flex-direction: column;
padding: 1em;
width: 45%;
}
.Contact-input{
width: 90%;
padding: .9em;
border: 0;
}
.Contact-input:focus{
outline: none;
}
.btn{
width: 100%;
background-color: #da2929;
box-shadow: 0px 8px 1px #671212;
color: white;
font-size: 1.5em;
font-weight: 700;
padding: .5em;
}
<form action="" class="Contact-form">
<input type="text" placeholder="Nombre" class="Contact-input" required="true">
<input type="text" placeholder="Apellido" class="Contact-input">
<input type="email" placeholder="correo#ejemplo.com" class="Contact-input" required="true">
<input type="submit" value="Subscribeme" class="Contact-input btn">
</form>
Assuming your input button is .btn, it carries a width of 100% while your text inputs carry a width of 90%, which is why there is a discrepancy.
You could handle this two ways
1) remove the width declarations entirely from .btn and .Contact-input (which would allow them both to take up the full 100% width), or
2) set both elements explicitly to have the same width
I solved this by adding box-sizing: border-box;on .Contact-input. I'll probably need to add the necessary prefixes for each browser.
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
Note: Since I have been trying to extract the code from a wordpress environment Salient theme, I have not been able to reproduce the issue in it's simplest form yet, I may end up answering my own question but please be aware that I appreciate any feedback along the way and I hope this question will be informative to the community.
My issue thus far is decribed below:
I am trying to gain better control over the way my content is displayed on the screen and there appear to be something I'm not understanding about CSS. I have tried using the "box-sizing: border box" property which includes padding and borders in the calculation of the total width of an element. I have added links to show the state of the input and span elements
"Chrome Devtool" Input element highlights
"Chrome Devtool" Span element content area
I assume box-sizing doesn't work because the issue is a margin related issue. My best guess is that the "margin-left" property has affected the total content area, pushing the content outside of the span element. However I want the input element to be contained inside the span element
HTML and CSS addition with thanks from Lucien Dubois
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.contact-fields input, textarea{
margin-left: 12px;
}
.wpcf7-form-control-wrap {
display: block !important;
position: relative;
}
div, span, h5, p {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin-right: 0;
border: 0
}
h5
{
font-family:Raleway;
line-height:16px;
margin-bottom: 7px;
color:#444;
letter-spacing:0px;
font-weight:600;
}
.form-label {
clear: both;
font-size: 20px
}
h5 {
vertical-align: baseline;
font-style: inherit;
outline: 0;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-left: 0;
border:0
}
.first-name, .last-name {
display: inline-block;
width: 40%;
margin-right: 9px;
}
.first-name input, .last-name input {
width: 62%;
}
input {
margin-bottom: 20px;
margin-top: 5px;
}
<div class="contact-fields">
<div class="name-section">
<div class="first-name">
<h5 class="form-label"> First Name:</h5>
<p>
<span class="wpcf7-form-control-wrap fname">
<input type="text"
name="fname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false">
</span>
</p>
</div>
<div class="last-name">
<h5 class="form-label"> Surname:</h5>
<p>
<span class="wpcf7-form-control-wrap lname">
<input type="text"
name="lname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false"></span>
</p>
</div>
</div>
</div>
you can try by adding min and max properties for your input field
input {
min-width: 100%;
max-width: 100%;
}
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
I have done the following with my forms:
Noe everything is fine when I have it on a large screen. But when I test it in my ripple emulator in the browser I get this, the screen size was a 240x320:
Here is my CSS:
.inputbox{
width: 80%;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
box-shadow: inset 0px 2px 2px #ececec;
display: inline;
padding: 8px;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox{
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 8px;
display: block;
border: 1px solid #d4d4d4;
background: #e9f939; /* Old browsers */
padding-right: 5px;
color:black;
float:left;
width:17.5%;
text-align: center;
}
Here is my HTML:
<label class="labelbox" for="textareacontactus">Enter Title*</label>
<input type="text" class="inputbox" data-role="none" ng-model="searchtitle" name="searchtitle" id="searchtitle" required>
<label class="labelbox" for="searchauthor">Enter Author</label>
<input type="text" class="inputbox" data-role="none" name="searchauthor" id="searchauthor">
<label class="labelbox" for="searchpublisher">Enter Publisher</label>
<input type="text" class="inputbox" data-role="none" name="searchpublisher" id="searchpublisher">
<label class="labelbox" for="searchedition">Enter Edition</label>
<input type="text" class="inputbox" data-role="none" name="searchedition" id="searchedition" ng-model="searchedition" ng-pattern="/^[0-9]+$/">
Now in the CSS I used width but using the %. So I can't see why its doing this? I would assume by using % it will always take up say 20% relative to the screen size because if this was the case then why does it do this on the emulator? What is the best practice to ahieve this responsive design?
You can use media queries such as #media (max-width: 767px)
Another thing you could try is using an HTML table like in this JSFiddle I made from your existing code: http://jsfiddle.net/ALYxt/
I have this simple layout:
<form>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this button to do Action A">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press!">
</div>
</form>
I use this simple style so that the buttons are big and are have some space between them:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
}
The problem I have is that the buttons do not have the same size (since it seems that the size of the button is the same as the size of the text) and form a scale (i.e. big, short, shorter).
How can I make the buttons have the same size irrespective of the containing text?
Just add a width property to the button CSS.
For example:
.buttonStyle {
//...
width: 100px;
}
set a width attribute in your CSS
like so:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width: 200px;
}
You have several options here. Setting a constant width may be one of them. You could also try display: block, which will make the buttons fill the entire width of their parent node.
Define some standard "width" for your buttons like,:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width:300px;
}
I have created a fiddle too to refer: http://jsfiddle.net/aasthatuteja/vChFX/
Hope this helps!