This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 4 years ago.
I have a responsive background image that I want to vertically center text over. I have tried setting the line height and container height to be equal and absolute positioning top:50% however it doesn't work. I also want the text to stay centered when I change the window size. This is as far as I have gotten. Can anyone help please.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Center Text</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Vertically Center Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.box
{
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
float: left;
}
.page-container
{
width: 992px;
margin: 0 auto;
}
.text1
{
float: left;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2
{
clear: both;
float: left;
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px)
{
.box
{
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px)
{
.box
{
height: 475px;
}
.text1
{
font-size: 16px;
margin: 0 20px;
}
.text2
{
font-size: 40px;
margin: 0 20px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
</body>
</html>
I have documented the changes in CSS. Flexbox is used to position the page-container in the center. All floats are removed to keep the document flow intact.
More information on flexbox here.
html,
body {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
/* float: left; REMOVED */
display: flex; /* Added */
align-items: center; /* Center vertically */
}
.page-container {
width: 992px;
margin: 0 auto;
}
.text1 {
/* float: left; REMOVED */
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2 {
/* clear: both;
float: left; REMOVED */
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px) {
.box {
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px) {
.box {
height: 475px;
}
.text1 {
font-size: 16px;
margin: 0 20px;
}
.text2 {
font-size: 40px;
margin: 0 20px;
}
}
<div class="box">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
Ok I solved this by displaying the box as a table and the box-container as a table-cell and using vertical-align:middle. Answer here:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Center Text</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Vertically Center Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.box
{
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
float: left;
display: table;
}
.box-container
{
display: table-cell;
vertical-align: middle;
}
.page-container
{
width: 992px;
margin: 0 auto;
}
.text1
{
position: relative;
float: left;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2
{
clear: both;
float: left;
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px)
{
.box
{
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px)
{
.box
{
height: 475px;
}
.text1
{
font-size: 16px;
margin: 0 20px;
}
.text2
{
font-size: 40px;
margin: 0 20px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box-container">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
</div>
</body>
</html>
Related
enter image description hereSorry, another newb. requiring help, please??
I have created a site (first site for 15 years) and there are a couple of things i'd like to know but the first and most important one is, why does my site header not show on iPhones?
Android showing header
iPhone without header
I have added the viewport meta tag but it didn't change anything.
Another thing l have read on here is adding #media but it didn't say where to add it so l tried a few places without success.
Can someone help me please?
Test page code
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<div id="logo">
<h2>Dress Up Leeds Ltd</h2>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>home</li>
<li>store</li>
<li class="active">contact us</li>
<li>about</li>
</ul>
</nav>
</div>
</div>
style.css for header
header
{
margin-bottom: 2em;
line-height: 1.7em;
}
header h2
{
font-size: 2.5em;
}
header .byline
{
display: block;
margin: 0.5em 0 0 0;
padding: 0 0 0.5em 0;
text-transform: uppercase;
font-size: 1.4em;
}
p {
font-size: 1.1em;
}
and
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 4em 0em;
}
style-mobile.css for header
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
and
#header
{
display: none;
}
#logo
{
display: none;
}
#nav
{
display: none;
}
style-mobile css the whole file
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body,input,textarea,select
{
line-height: 1.75em;
font-size: 11pt;
letter-spacing: 0;
}
body
{
padding-top: 44px;
}
h2, h3, h4, h5, h6
{
font-size: 1.5em;
}
section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}
section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}
section:first-child,
article:first-child
{
margin-top: 0 !important;
}
.container
{
padding: 0em 1em;
}
.button
{
display: block;
width: 100%;
text-align: center;
}
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
/*********************************************************************************/
/* UI */
/*********************************************************************************/
#titleBar
{
background: #202020 url(images/img01.jpg) repeat;
}
#titleBar .title
{
display: block;
color: #fff;
text-align: center;
line-height: 44px;
}
#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 12px;
position: absolute;
left: 10px;
top: 15px;
background: url('images/toggle.svg') 0px 0px no-repeat;
opacity: 0.5;
}
#titleBar .toggle:active:after
{
opacity: 0.75;
}
#navPanel
{
background: #202020 url(images/img01.jpg) repeat;
box-shadow: inset -10px 0px 20px 0px rgba(0,0,0,0.5);
}
#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 1em 0 1em;
}
#navPanel .link:first-child
{
border-top: 0;
}
#navPanel .link.depth-0
{
color: #fff;
}
#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
display: block;
}
#logo
{
display: block;
}
#nav
{
display: block;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
padding: 6em 0em;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page
{
padding: 2em 0em 2em 0em;
}
#main
{
margin-top: 3em;
padding-top: 0em;
border-top: none;
}
.homepage #main
{
margin-top: 3em;
padding-top: 3em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
padding: 0em 0em 2em 0em;
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
position: relative;
padding: 4em 0em 2em 0em;
}
#featured .divider
{
padding: 2em 0em 0em 0em;
}
#featured .left
{
float: none;
width: 100%;
}
Try this:
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}
display: none hides elements, so your css is hiding your header. The viewport tag makes no difference in whether or not the header is hidden. I am missing context here, but your css looks like it is very intentionally hiding your header, so I am guessing it was written by someone else? If so, that person may have written it with the intent of applying these css rules for one screen size and applying a different set of rules for another screen size, but perhaps they left the task unfinished, or we are only seeing a small part of the css here. If that is the case, then you should look into using media queries to apply different sets of rules for different screen sizes.
I am stuck trying to find an appropriate solution; without adding a lot of divs to my markup.
I need the content at the 1200px media query; to stay fixed at 1200 and in the centre. Which is working.
However, the row containers with background colours, shadows etc. to stay 100% of the width.
Any guidance on how best to solve this problem; would be very much appreciated.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
input[type=text] {
font-size: 1.5rem; padding: 0 0.25em 0 1.2em; height: 4rem;
line-height: 4rem; width: 50vw; color: #333;
background: #f5f5f5; border: 1px solid #f5f5f5;
}
.head_sticky {
position: sticky; top: 0; z-index: 100;
}
#media only screen and (max-width: 599px) {
.col-m-1 { width: 16.67%; } .col-m-2 { width: 33.33%; } .col-m-3 { width: 50.00%; }
.col-m-4 { width: 66.67%; } .col-m-5 { width: 83.33%; } .col-m-6 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 16px 5px 0;
}
.search_form_cls {
height: 4.5rem; line-height: 4.5rem; font-size: 3rem;
color: black; border: none; background: transparent;
}
input[type=text] {
width: 75vw;
}
}
#media only screen and (min-width: 600px) {
.col-t-1 { width: 12.5%; } .col-t-2 { width: 25%; } .col-t-3 { width: 37.5%; }
.col-t-4 { width: 50%; } .col-t-5 { width: 62.5%; } .col-t-6 { width: 75%; }
.col-t-7 { width: 87.5%; } .col-t-8 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 24px 5px 0;
}
}
#media only screen and (min-width: 768px) {
.col-d-1 { width: 8.33%; } .col-d-2 { width: 16.66%; } .col-d-3 { width: 25% }
.col-d-4 { width: 33.33% } .col-d-5 { width: 41.66% } .col-d-6 { width: 50%; }
.col-d-7 { width: 58.33%; } .col-d-8 { width: 66.66%; } .col-d-9 { width: 75%; }
.col-d-10 { width: 83.33%; } .col-d-11 { width: 91.66% } .col-d-12 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 28px 5px 0;
}
}
#media only screen and (min-width: 1200px) {
.A3_row {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
[class*='col-']:first-of-type {
padding-left: 16px;
}
[class*='col-']:last-of-type {
padding-right: 16px;
}
.A3_row {
display: flex; background-color: white;
}
.A3_row [class*='col-'] {
display: flex; align-items: center; flex-wrap: wrap;
}
.A3_row::after {
content: ""; clear: both; display: table;
}
.navigation_link
text-decoration: none; color: black;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='head' class='A3_row shadow_bottom head_sticky'>
<div class='col-m-1 col-t-1 col-d-1'>
<span class='navigation_link'>☰</span>
</div>
<div class='col-m-2 col-t-2 col-d-2'>
LOGO
</div>
<div class='col-m-3 col-t-5 col-d-9 t-end'>
<input autocomplete='off' name='q' class='search_form_m' type='text' placeholder='Search' value='' maxlength='100'>
</div>
</div>
<div class='A3_row' style='background-color:blueviolet; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:blueviolet;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:gold; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:gold;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:lightseagreen; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:lightseagreen;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row'>
<div class='col-m-6 col-t-8 col-d-12' style='align-items: flex-start'>
<span>FOOTER</span>
</div>
</div>
</body>
</html>
A CSS-only solution using calc():
#media only screen and (min-width: 1200px) {
.A3_row {
width: 100%;
padding-left: calc((100% - 1200px) / 2);
padding-right: calc((100% - 1200px) / 2);
}
}
This width declaration makes the "row" 100% of the width of its containing block while the padding-* declarations ensure the "content" is 1200px.
See calc() (MDN)
Open in full window and resize the window the input field is not responsive so the button moves below the input which is not what i want.
.coupon {
width: 100%;
max-width: 500px;
outline: none;
margin: 0;
box-sizing: border-box;
height: 22px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
max-width: 100%;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
try with width: calc(100% - 86px);.
.coupon {
width: calc(100% - 86px);
outline: none;
margin: 0;
box-sizing: border-box;
height: 22px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
Try like this
.flex-col {
display: flex;
display: -webkit-flex;
}
.coupon {
width: 100%;
max-width: 500px;
outline: none;
margin: 0;
box-sizing: border-box;
height: 30px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size: 0.875;
max-width: 100%;
}
<div class="flex-col">
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
</div>
try adding some mediaqueries
#media(max-width: 37em){
.coupon{width: 50%;}
}
You Must Learn #media contents https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
otherwise, use Bootstrap https://www.w3schools.com/bootstrap4/
The easy way is to use bootstrap.
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 80% 20%;
justify-content: center;
align-items: center;
}
.coupon {
width: 100%;
outline: none;
margin: 0;
box-sizing: border-box;
padding: 8px 0;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
</div>
</body>
</html>
Wrap the elements into a .container and use display: grid
You can give column width to on the container as you want it to be! I have used percentage, instead you can use pixel.
For reference go through this link https://www.w3schools.com/css/css_grid.asp
Hope it'll solve your problem
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }