My contact form is looking how it is supposed to in desktop and tablet mode. However, when I switch my browser to mobile the email input in slightly shorter than the name input and the text box. What is causing this issue?
#formsec{
margin-left:20px;
margin-right:20px;
}
#worktogether{
text-align: center;
color:white;
font-size:50px;
margin-top:60px;
font-family: 'Philosopher', sans-serif;
}
form {
max-width:1200px;
margin: 0 auto 50px;
}
input, textarea {
border: 3px solid #69EAF5;
width:100%;
box-sizing:border-box;
padding:10px;
}
label{
display:block;
margin-bottom:20px;
}
span{
display:block;
color:white;
font-size:20px;
}
.contact-info-group label{
width: 50%;
box-sizing: border-box;
float:left;
}
.contact-info-group label:nth-child(1){
}
.contact-info-group label:nth-child(2){
padding-left:15px;
}
input:focus, textarea:focus{
outline: none;
border-color:#008a91;
}
textarea{
height:400px;
}
.button-wrap{
margin-left:67%;
width:33%;
}
[type="submit"]{
background:#097784;
border-color:#097784;
color:white;
font-size: 18px;
text-transform: uppercase;
}
#media screen and (max-width:480px){
.contact-info-group label{
width: 100%;
box-sizing: border-box;
float:left;
}
}
<section id="formsec">
<h3 id="worktogether">Let's Work Together</h3>
<form id="form2" action="FormToEmail.php" methods="POST">
<div class="contact-info-group">
<label><span>Your Name</span>
<input type="text" name="text"></label>
<label><span>Your Email</span>
<input type="email" name="_replyto"></label>
</div>
<label><span>How Can I Help:</span>
<textarea name="message"></textarea></label>
<input class="button-wrap" name="submit_to_programmer" type="submit" value="Submit"/>
</form></section>
You have 15px padding for desktop, which needs to be removed for mobile.
#media screen and (max-width:480px){
.contact-info-group label:nth-child(2) {
padding-left:0px;
}
}
You'll have to override the padding set for the second child in media query
#media screen and (max-width: 480px) {
.contact-info-group label:nth-child(2) {
padding-left: 0;
}
}
Related
So I watched this tutorial on how to create a good contact me form. But the problem is I am having trouble centering it. It uses some grid tags and it responsive. So I would like to keep the responsive there but when in full width I want it to be centered like the logo is. (New to HTML & CSS just learning)
HTML Code
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>
My CSS
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}
#media(min-width: 700px){
.wrapper {
/* remove this
display: grid;
grid-template-columns: 1fr; */
display: flex;
justify-content: center;
}
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: flex;
justify-content: center;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>
While you could use margin: auto, you might stumble upon weird behaviors if you use grid somewhere not shown in your code.
Further reading:
Css grid
A guide to css flexbox
This code could be of help, basically I have removed the code that is affecting the container of the form and added so that it will work in responsive in a single field.
CSS:
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
max-width: 680px;
margin: auto;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
#media screen and (max-width: 680px) {
.contact{
max-width: inherit;
}
.contact form {
display: block;
}
}
EXAMPLE: https://jsfiddle.net/8dvch6nj/
Depending on whether or not you wanted to keep the entire block in grid format, you could always change .wrapper to not use the grid, but just have a margin of 0px auto. If you wanted to still use grid layout, you could just change .wrapper to a width of 100%
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 100%;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line
.search-container{
width:100%;
border: 1px solid #000;
display:block;
}
.search-text-container {
width:90%;
display:inline-block;
}
.search-text-container input {
width:100%;
height:30px;
}
.round-icon-container {
width:10%;
display:inline-block;
}
.round-icon-button {
min-width:30px;
display:block;
width:30px;
height:30px;
line-height:normal;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-weight:bold;
}
.round-icon-button:hover {
background: #262626;
}
<div class="search-container">
<span class="search-text-container">
<form action="">
<input type="text" name="fname" />
</form>
</span>
<span class="round-icon-container">
<button type="submit" class="round-icon-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated
You could achieve it by using CSS #media queries like this:
JSFiddle - DEMO
* {
box-sizing:border-box;
}
#media(max-width:320px) {
.search-text-container {
width:70% !important;
}
.round-icon-container {
width:30% !important;
}
}
.search-container {
width:100%;
border: 1px solid #000;
display:block;
font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
font-size: 16px; /* add the font-size to child span elements */
vertical-align: middle;
}
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.
I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.
HTML
<div class="stcommenttext">
<form method="post" action="">
<div class="comtextarea">
<div class="yorumyazalani">
<textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
</div>
<div class="comgonder">
<input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
</div>
</div>
</form>
</div>
CSS
.comment {
border:1px solid #fff;
width:425px;
margin-left:3px;
margin-top:3px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
resize:none;
background-color:#f4f4f4;
}
.comtextarea {
float:left;
width:494px;
margin-left:3px;
height:auto;
border:1px solid #d8dbdf;
background-color:#fff;
}
.comtextarea textarea {
min-height:30px;
}
.yorumyazalani {
float:left;
width:auto;
height:auto;
}
.comgonder {
float:right;
width:auto;
height:auto;
bottom:0px;
margin-left:-5px;
}
.wallbutton {
float:left;
background-color: #fff;
min-width: 32px;
padding: 4px;
text-align: center;
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #fff;
color: white !important;
cursor: pointer;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
padding: 5px;
margin-left:5px;
text-decoration:none;
background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
background-repeat:no-repeat;
background-position:left;
outline:none;
}
Here is the DEMO
You can fix this in a couple of simple steps:
Set position: relative; on .comtextarea. Now each child can relate to it's container.
Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.
Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.
Codepen Fork
Try this CSS for the button:
.comgonder {
width: auto;
height: auto;
margin-bottom: 8px;
vertical-align: bottom;
display: inline-block;
}
And this for the textarea:
.yorumyazalani {
width: auto;
height: auto;
vertical-align: top;
display: inline-block;
}
This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.
Updated Demo: http://codepen.io/anon/pen/CdxDI
.comtextarea
{
position: relative;
}
.comgonder
{
position: absolute;
right: 0px;
bottom: 0px;
}
You can change the right/bottom offsets for better spacing/alignment if you like