I want to add a border in the button before the icon
what I m using is that
my code is this
.button {
background-color: #4CAF50;
border: none;
color: white;
Width: 660px;
Height:55px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background: #333333;
position: absolute;
left: 16.76%;
right: 16.68%;
top: 27.29%;
bottom: 30.89%;
font-family: DIN Pro;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Contact<span style="border:solid 1px white"><i class="fa fa-home;"></span></i>
</body>
</html>
but it is not setting up like that. I want to set it up like the same is in the picture
Here is the code you need for the button. To answer your question about the border on the icon, I added a pseudo element (:after) to the button which contains the arrow icon. Then it was just a matter of applying border-left to it.
/* button styles */
.button {
background-color: slategray;
font-family: sans-serif;
border: none;
outline: none;
min-height: 42px;
min-width: 180px;
max-width: 100%;
font-weight: bold;
text-decoration: none;
cursor: pointer;
font-size: 18px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 8px 52px 8px 10px;
position: relative;
}
.button:after {
content: "\f061";
display: flex;
position: absolute;
font-family: "Font Awesome 5 Free", sans-serif;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 42px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 1px solid #8192a2;
}
.button:hover {
background-color: #8192a2;
}
.button:hover:after {
border-left-color: #95a7b8;
}
/* example styles */
body,
html {
padding: 0;
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: coral;
}
* {
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
Contact
Related
I'm trying to put a border in a button, I tried to create 2 div and then do display: inline-block but it doesn't work, here is my code:
`#vid {
position: absolute;
width: 95px;
height: 60px;
background-color: #ffff;
border: #ffff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#h5-vid {
border-radius: 25px;
background: #ffff;
border-color: black;
display: inline-block;
}
<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></button></div>`
This is what I want to get:
This is what I got:
Put both elements with text inside the button:
<button id="vid">
<p>Videos</p>
<h5 id="h5-text-vid">NEW</h5>
</button>
Use display: flex; with justify and align center for the button then simply add border to the h5 element using border: solid 1px black;
Here is a working snippet:
#vid {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 95px;
height: 60px;
background-color: #ffff;
border: none;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
#h5-text-vid {
border: solid 1px black;
border-radius: 25px;
padding: 3px;
font-size: 6pt;
font-weight: 800;
}
body {
/* Just for demo */
background-color: gray;
}
<button id="vid">
<p>Videos</p>
<h5 id="h5-text-vid">NEW</h5>
</button>
Your code didn't work because p tag is block element.
And also p and h5 tag has margin-block-start and margin-block-end.
So I removed those margins, and set display: inline-block to p tag.
Now, it works.
Note: You set border-color to div#h5-vid, but didn't work because div doesn't have border in default.
So I changed it as border: 1px solid black.
p, h5 {
margin-block-start: 0;
margin-block-end: 0;
display: inline-block;
}
#vid{
position: absolute;
width: 95px;
height: 60px;
background-color: #fff;
border: #fff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#h5-vid{
border-radius: 25px;
background: #fff;
border: 1px solid black;
display: inline-block;
margin-left: 5px;
padding: 0 3px;
}
<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></div></button>
I have the following component in my application
.call-support {
display: flex;
justify-content: center;
padding: 20px 0 20px 0;
}
.container-support {
display: flex;
align-items: center;
}
.support-text {
text-align: center;
margin-left: 10px;
}
.title-text {
font-family: "RalewayRegular";
font-weight: bold;
font-size: 16px;
}
.subtitle-text {
font-family: "RalewayRegular";
font-weight: normal;
font-size: 16px;
}
.customer-service-request {
display: flex;
flex-direction: column;
align-items: center;
padding: 10% 0 20% 0;
}
.request-text {
display: flex;
}
.number {
font-size: 18px;
color: #D53865;
font-weight: bold;
background-color: #f9f4f1;
width: 340px;
height: 130px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.number:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 65px solid #666B74;
border-left: 65px solid #f9f4f1;
width: 0;
border-bottom: 65px solid #666B74;
}
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
display: flex;
margin-top: 40px;
}
.number-request {
font-family: "RalewayRegular";
color: #fff;
font-size: 18px;
font-weight: bold;
background-color: #666B74;
height: 40px;
width: 340px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="call-support">
<div class="container-support">
<div class="request-text">
<p class="number">000 000 000<span class="subtitle-number">(local call)</span></p>
<p class="number-request">Customer Service</p>
</div>
</div>
</div>
It is well laid out with this css in all browsers, except in Internet Explorer where the margin top of "subtitle-number" shows it almost stuck to the margin-bottom of the box it belongs to.
Here I leave a link to a codepen with the design.
https://codepen.io/CharlieJS/pen/dyXyBBe
and an image of how it looks in Internet Explorer
How can I adjust the design to display in all browsers?
Why is the margin-bottom higher in IE?
thank you all for your time and help
This is created by display: flex; in class .subtitle-number. So just remove it and it will work fine.
Try to set this class wit top & left like:
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
/*display: flex;
margin-top: 40px;*/
top:70%;
left:50%;
transform: translate(-50%, 30%);
}
As position absolute is better set with top, right, bottom, left. It seems to work fine by me on w3schools on IE11.
DEMO
.call-support {
display: flex;
justify-content: center;
padding: 20px 0 20px 0;
}
.container-support {
display: flex;
align-items: center;
}
.support-text {
text-align: center;
margin-left: 10px;
}
.title-text {
font-family: "RalewayRegular";
font-weight: bold;
font-size: 16px;
}
.subtitle-text {
font-family: "RalewayRegular";
font-weight: normal;
font-size: 16px;
}
.customer-service-request {
display: flex;
flex-direction: column;
align-items: center;
padding: 10% 0 20% 0;
}
.request-text {
display: flex;
}
.number {
font-size: 18px;
color: #D53865;
font-weight: bold;
background-color: #f9f4f1;
width: 340px;
height: 130px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.number:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 65px solid #666B74;
border-left: 65px solid #f9f4f1;
width: 0;
border-bottom: 65px solid #666B74;
}
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
/*display: flex;
margin-top: 40px;*/
top:70%;
left:50%;
transform: translate(-50%, 30%);
}
.number-request {
font-family: "RalewayRegular";
color: #fff;
font-size: 18px;
font-weight: bold;
background-color: #666B74;
height: 40px;
width: 340px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="call-support">
<div class="container-support">
<div class="request-text">
<p class="number">000 000 000<span class="subtitle-number">(local call)</span></p>
<p class="number-request">Customer Service</p>
</div>
</div>
</div>
The absolute property is set in this style but the coordinate value is not set. Because of the different calculation methods such as element position parameters in different browsers, the results are not the same in different browsers.
At this time, it is not necessary to use relative positioning, but to have a certain coordinate. Please modify the .subtitle-number style as following:
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
top: 80px;
left: 145px;
}
Result in IE:
I want this line to be placed in the middle under the title, but it doesn't work when I try text-align.
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title{
position: relative;
top: 70px;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
}
.title::after {
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
}
enter image description here
I'm sorry in advance because it's not the time for me to click on the recommendation yet. Thank you for all your answers.
Will this do?
body {
background-color: #000;
}
section {
position:relative;
}
.title{
color: #fff;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
border-bottom-width: 50%;
}
.title::after {
position:absolute;
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
left: 25%;
}
<body>
<section>
<div class="title">What I Play</title>
</section>
</body>
text-align: center aligns the inline content of that element, not the element itself.
you probably want to use margin: 0 auto; for .title::after.
I found a solution to your issue. you have to change small changes in your CSS and also you have to add some css in .title-box class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title-box{
text-align:center;
}
.title{
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
display: inline-flex;
flex-direction: column;
}
.title::after {
display: flex;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 title-box">
<h1 class="title">What I Play</h1>
</div>
</div>
</div>
</body>
</html>
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
Observe the following banner I have:
I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.
JS Fiddle: http://jsfiddle.net/z63234p1/
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
<header id="masthead" class="site-header" role="banner">
<button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
<div class="site-branding">
<div id="sitelogo" class="clear">
<h1 class="site-title">My Website</h1>
<h2 class="site-description">Your Go To Stop</h2>
</div>
</div>
</header>
I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.
Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?
Thank you in advance.
Use this Css:
<style type="text/css">
#masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 73px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 4px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 6px 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
</style>
New css for #sitelogo:
display: inline-flex;
align-items: stretch;
New css for .site-title:
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
New css for .site-description:
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
padding: 0 16px;
font-size: 3vh;
display: flex;
align-items: center;
justify-content: center;
Besides that I strongly suggest to not use vh for font-size.
I messed around with your line height of site-title as well as line height and height of site-description. Here's my result:
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: 58px;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 108%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 3.7;
float: left;
clear: none;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
Here's a diff compare to see the differences: http://www.mergely.com/vGQedH1p/ Is this what you were looking for?