I'm working on a project, I have the layout how my client wants it. I'm rekatively new to responsive layouts. In mobile devices with width 321px Im struggling to get right column to expand over the full width of the screen/device.
I understand this is likely a duplicate question, below is a fiddle but if anyone can take a look and either offer some adive or point me to previous answers I'd be grateful.
#media only screen
and (max-width : 320px) {
.container {
width: 321px ! important;
}
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right;
margin-left; 10%;
}
}
body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}
#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}
#banner ul {
float: right;
font-size: 0.70em
}
#banner ul li {
display: block;
float: left
}
#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}
#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}
#columnright ul {
overflow: hidden;
}
#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}
#pic-gallery {
margin-left:17.5%;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display:flex;
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}
#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}
#myGallery img.active {
display: block;
}
.titlegrp {
}
.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}
.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}
.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}
.imgleft {
float: left;
margin-right: 5px;
}
.imgright {
float: right;
margin-right: 60px;
}
.contentpara {
padding-left: 15px;
}
.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}
.sidelinks a:link {
text-decoration: none;
color: black;
}
.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}
.sidelinks a:visited {
text-decoration: none;
color: blue;
}
.tablecont {
padding-left: 15px;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div.img:hover {
border: 1px solid #777;
}
div.img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
margin: auto;
}
<!doctype html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">
</header>
<body>
<div class="container">
<div id="banner">
<ul class="none">
<li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
<img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
<li class="nav"> <a href="mailto:katiesummers789#gmail.com">
<img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
<li class="field"><input type="text" title="Search" text="Search" /></li>
</ul>
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>
</div>
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
Home
<br>
About
<br>
Sample Day
<br>
Gallery
<br>
Testimonials
<br>
Enquiries
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>
<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
<hr>
<p>My Qualifications</p>
<p>I attend training regularly and have qualifications in:</p>
<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
<li>Health and Safety</li>
<li>Equal Opportunities</li>
<li>Home based Childcare</li>
<li>Working with two year olds</li>
<li>schemas</li>
<li>NVQ3 Children's care, Learning and Development</li>
<li>Open University - Understanding Autism</li>
</ul>
<br>
<p>Click below for a little information on Childminding</p>
Pacey's Info on Registered Childminders
<div style="clear: both;"></div>
<br>
</div>
<div id="footer">
<p>Brian Johnson
<br>© Copyright 2016. All Rights Reserved</p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/aw3eb1oa/
You were really close - just need to put your media query at the bottom of the CSS so it can override the other styles. Then add a width:100%; and margin-left: 0;
#columnleft, #columnright {
float: none;
width: 100%;
}
#columnright {
display: block ! important;
clear: right;
margin-left: 0;
}
Updated: Fiddle
You need to over-ride your earlier CSS like this:
#media only screen and (max-width : 320px) {
.container {
width: auto;
}
#columnleft,#columnright {
float: none;
width: 100%;
}
}
I am a beginner, and I am having trouble recreating my mockup in CSS. One issue is the second section of my homepage (benefits). I wanted a two column checkerboard layout alternating white and cardboard backgrounds. I'm not sure if the answer is to change the media queries or include more subclasses. I'm generally lost on this. Here is my mockup. Thank you in advance.
Did I mention that you have to speak to me as if I am 5 years old?
html,
body {
overflow-x: hidden;
}
body {
font-family: "Montserrat", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
}
/* HEADER */
header {
color: #FFFFFF;
}
header .logo {
float: left;
}
header nav {
padding: 1em 0;
}
header nav ul {
display: inline;
text-align: right;
float: right;
margin: 0;
}
header nav ul>li {
list-style-type: none;
display: inline-block;
margin: 0 15px;
}
header nav ul>li.btn-outline {
padding: 10px 15px;
border: 2px solid #FFFFFF;
border-radius: 4px;
}
header nav ul>li.btn-outline:hover {
background: #FFFFFF;
}
header nav ul>li>a {
color: #FFFFFF;
text-decoration: none;
}
header nav ul>li.btn-outline:hover>a {
color: #845F5A;
}
header .headline {
text-align: center;
display: block;
text-align: center;
padding-bottom: 95px;
}
header .headline h1 {
font-size: 48px;
font-weight: normal;
margin: 95px 0 0;
}
header .headline p {
font-size: 22px;
line-height: 26px;
font-weight: 100;
margin: 10px 0 40px;
}
header,
footer,
section {
overflow: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Crimson Text", Helvetica, Arial, serif;
color: white;
}
h2 {
font-size: 48px;
font-weight: normal;
margin-bottom: 20px;
line-height: 1.5em;
}
p {
font-size: 16px;
line-height: 19px;
font-weight: 100;
}
/* GRID */
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.one-half,
.one-third,
.one-fourth {
width: 96%;
float: left;
position: relative;
min-height: 1px;
margin: 0 2% 20px;
}
/*IMAGES*/
.hero {
vertical-align: top;
background-image: url("images/brainstorm.png");
background-size: cover;
position: relative;
}
.overlay {
position: relative;
}
.overlay:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 500%;
height: 100%;
display: none;
z-index: 0;
}
.overlay:hover:before {
display: block;
}
.black:before {
background-color: #000000;
opacity: .35;
}
.brown:before {
background-color: #7E6233;
}
.hero * {
position: relative;
/* hack */
}
/* BUTTONS */
.btn {
border-radius: 4px;
color: #FFFFFF;
font-weight: 700;
text-decoration: none;
padding: 10px 30px;
background: #F9461C;
box-shadow: 0 2px 4px 2px rgba(71, 19, 7, 0.90);
;
}
.container-second-hero {
vertical-align: top;
height: 287px;
background-image: url("images/Guy-on-grass.png");
background-size: cover;
position: relative;
}
.benefits {
background-image: url("images/cardboard.png");
background-repeat: repeat;
display: block;
position: relative;
color: #1F1309;
text-align: center;
height: 100%;
}
.benefits ul li {
list-style-type: none;
display: inline-block;
}
.benefits i {
color: #1F1309;
font-size: 144px;
margin: 0;
border: 0;
vertical-align: middle;
display: block;
height: 336px;
width: 100%;
}
.benefits h2 {
color: #1F1309;
font-size: 48px;
font-weight: bold;
}
.benefits p {
font-size: 24px;
line-height: 1.5em;
}
.additional-features {
background-image: url("images/cardboard.png");
background-repeat: repeat;
text-align: center;
display: block;
padding-bottom: 72px;
display: table;
width: 100%;
}
.additional-features h1 {
display: table-cell;
vertical-align: center;
text-align: center;
}
.additional-features h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
color: #1F1309;
font-size: 36px;
}
.additional-features ul {
color: #1F1309;
font-size: 18px;
line-height: 1.5em;
font-weight: 100;
list-style: none;
}
/* PRICING */
.pricing {
background: #FFFFFF;
padding: 4em 0;
text-align: center;
padding: 4em 0;
}
.pricing h2,
.pricing h3,
.pricing h4,
.pricing p {
color: #1F1309;
line-height: 0.5em;
}
.pricing ul {
margin: 0 auto;
padding: 2em 0;
}
.pricing ul li {
list-style-type: none;
}
.pricing .container p {
line-height: 1.5em;
}
.box {
padding: 0 0 15px;
background: rgba(124, 49, 70, 0.18);
border: 1px solid #979797;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
min-height: 439px;
position: relative;
margin-top: 25px;
width: 100%;
}
.box.middle {
border: 1px solid rgba(31, 19, 8, 0.55);
box-shadow: 0 2px 0 1px rgba(46, 60, 65, 0.52);
background: #FFFFFF;
min-height: 485px;
margin-top: 0px;
width: 110%;
}
.box h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 48px;
}
.box h4 {
font-size: 50px;
font-weight: normal;
margin: 40px 0 10px;
color: #1F1309;
text-transform: uppercase;
}
.box h4 span {
font-size: 32px;
vertical-align: top;
}
.box h4 span.month {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
font-size: 20px;
vertical-align: middle;
}
.box ul li {
font-size: 18px;
margin-bottom: 20px;
font-weight: 100;
}
.box .btn {
position: absolute;
bottom: 60px;
left: 40px;
right: 40px;
}
.small {
font-size: 12px;
color: #FEFEFE;
line-height: 15px;
font-style: italic;
}
/* TESTIMONIALS */
.testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials h2 {
color: #1F1309;
}
.testimonials ul li {
list-style-type: none;
}
.testimonials blockquote {
color: #FFFFFF;
text-align: left;
font-style: italic;
background: #1F1309;
position: relative;
padding: 30px;
width: auto;
margin: 0;
}
.testimonials blockquote:after {
top: 100%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1F1309;
border-width: 10px;
margin-left: -10px;
}
.testimonials img {
height: 65px;
width: 65px;
border-radius: 50%;
float: left;
display: inline-block;
margin: 20px 10px 0 0;
}
.testimonials p.name {
float: left;
display: inline-block;
text-align: left;
font-size: 13px;
margin-top: 30px;
}
.testimonials .second,
.fourth {
position: relative;
top: 20px;
}
/* FOOTER */
footer {
background-color: #34495E;
background-image: linear-gradient(to top, #3498DB 0%, #3498DB 50%, #34495E 50%, #34495E 100%);
color: #FFFFFF;
height: 150px;
position: relative;
overflow: hidden;
z-index: 0;
}
footer p,
footer nav ul {
font-size: 14px;
font-weight: 100;
text-align: center;
margin: 10px auto 0;
}
footer nav ul li {
list-style-type: none;
display: inline;
}
footer nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
footer .right-footer-block {
background-color: transparent;
}
footer .logo {
padding: 2.35em 0;
margin: 0 auto;
display: block;
}
#media (min-width: 992px) {
footer {
background-color: #3498DB;
background-image: linear-gradient(to left, #3498DB 0%, #3498DB 33.33337%, #34495E 33.33337%, #34495E 100%);
height: 100px;
}
footer p,
footer nav ul {
padding: 2em 0;
text-align: left;
}
footer .right-footer-block {
background-color: #3498DB;
}
footer .logo {
padding: 2em 0 2em 1.5em;
}
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
.one-half {
width: 46%;
}
.one-third {
width: 32.64177%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.one-fourth {
width: 21%;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media (min-width: 4000px) {
.container {
width: 3800px;
}
html {
font-size: 150% line-height: 150%
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UZ-Compatible" content="IE=Edge">
<meta charset="UTF-0">
<title>Save, share, and collaborate | Blockbox</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Montserrat:400,700" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css" </head>
<body>
<!-- Hero -->
<header>
<div class="hero overlay black">
<nav class="container">
<div class="one-half">
<img src="images/site-white-logo.png" alt="Blocbox" />
</div>
<div class="one-half">
<ul>
<li>Sign In</li>
<li class="btn-outline">Sign Up</li>
</ul>
</div>
</nav>
<div class="container headline">
<h1 class="animated fadeIn">Save, share and collaborate.</h1>
<p>blocbox lets you collect and sort information.<br/>Create simple notes, store images, and add links.</p>
Start Your Free Trial!
</div>
</div>
</header>
<main role="main">
<!-- Benefits -->
<section class="benefits">
<ul class="container">
<li class="one-half">
<div class="top">
<h2>Create notes</h2>
<p>Using Markdown, you can create simple text-based documents to save and share. You can collaborate with others to write and edit content.</p>
</div>
<i class="fa fa-file-o"></i>
<div class="bottom">
<h2>Add Links</h2>
<p>Forget bookmarking sites in your browser. With blocbox, you can add links, group them and view them from any computer.</p>
</div>
</li>
<li class="one-half">
<i class="fa fa-picture-o"></i>
<div class="middle">
<h2>Save images</h2>
<p>Are there images you find interesting enough to save? Now you have a way to organize and store those within blocbox.</p>
</div>
<i class="fa fa-link"></i>
</ul>
</section>
<!-- Additional Features -->
<section class="additional-features">
<div class="container-second-hero">
<h1>Access blocbox anywhere.</h1>
</div>
<ul class="container">
<li class="one-third">
<h3>Collaborate</h3>
<ul>
<li>Invite collaborators</li>
<li>Chat in real time</li>
</ul>
</li>
<li class="one-third">
<h3>Organize</h3>
<ul>
<li>Tag items</li>
<li>Search for items</li>
<li>Create boxes</li>
</ul>
</li>
<li class="one-third">
<h3>Do</h3>
<ul>
<i class="fa-calendar-check-o"></i>
<li>Assign due dates</li>
<i class="fa-clock-o"></i>
<li>Set reminders</li>
</ul>
</li>
</ul>
</section>
<!-- Pricing -->
<section class="pricing">
<div class="container">
<h2>How much does blocbox cost?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up. <br/>Here are the different features of each plan:</p>
</div>
<ul class="container">
<li class="one-third">
<div class="box">
<h3>Casual</h3>
<h4>Free</h4>
<ul>
<li>Up to 5 boxes</li>
<li>Up to 10 collaborators</li>
<li><strong>2GB</strong> of storage</li>
</ul>
Start Your Free Trial!
</div>
<li class="one-third">
<div class="box middle">
<h3>Professional</h3>
<h4><span>$</span>5<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Up to 20 collaborators</li>
<li><strong>5GB</strong> of storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
<li class="one-third">
<div class="box">
<h3>Expert</h3>
<h4><span>$</span>10<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Unlimited collaborators</li>
<li><strong>Unlimited</strong> storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
</ul>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<h2>Who uses blocbox?</h2>
<p>blocbox has more than 100,000 satisfied users storing and collaborating<br/> with teams across the world. Here's what a few have to say:</p>
</div>
<ul class="container">
<div class="first">
<li class="one-fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth second">
<div class="second">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth third">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</li>
<li class="one-fourth fourth">
<div class="fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
</ul>
</section>
<!-- Call to Action -->
<section class="CTA">
<div class="container">
<h2>Ready to give it a try?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up.</p>
Start Your Free Trial!
</div>
<!-- Footer -->
<footer>
<div class="container footer-nav-block">
<div class="left-footer-block one-third">
<p class="copyright-block">© 2015. <strong>Blocbox</strong> - All Rights Reserved.</p>
</div>
<nav class="link-block middle-footer-block one-third">
<ul>
<li>Terms</li> /
<li>Privacy Policy</li> /
<li>Contact Us</li> /
<li>About Us</li> /
<li>Twitter</li>
</ul>
</nav>
<div class="right-footer-block one-third">
<img class="logo" src="images/site-brown-logo.png" alt="Blocbox" />
</div>
</div>
</footer>
</main>
</body>
</html>
</body>
</html>
You could just make it a table, and use CSS to set the background using some nth-child logic.
To center your text you can use flex boxes with a container inside of it, I just made it a div and marked it as display:inline-block; with some CSS.
Since I'm pretty sure your cardboard is an image, all you'd have to do is to replace the background-color:rgb(###,###,###); by a background-image element.
and you should be it.
table.Container{
width:100%;
}
table.Container td{
display:inline-flex;
text-align:center;
align-items:center;
justify-content:center;
vertical-align:middle;
height:2in;
flex-direction:row;
box-sizing:border-box;
width:50%;
}
table.Container td > div{
display:inline-block;
}
table.Container tr:nth-child(odd) > td:nth-child(odd),
table.Container tr:nth-child(even) > td:nth-child(even){
background-color:rgb(219, 148, 50);
}
table.Container tr:nth-child(even) > td:nth-child(odd),
table.Container tr:nth-child(odd) > td:nth-child(even){
background-color:white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table class="Container">
<tbody>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>