So, I've been building sites for a good while, mainly utilizing Zurb Foundations for layout and responsive features. Recently, for the first time, I decided to hack it out from the ground up using media queries. My CSS is a little wonky (I, for some reason, had to push my second section down by 260px to avoid overlapping the first) but does the job just fine in Chrome. In Firefox and Safari however the two sections remain atop one another. Can anyone recommend a CSSolution for my issue?
Thanks,
John
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
#media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
#media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
#media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
#media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
#media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
#media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
#media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
I have add one property this media query
#media screen and (max-width: 700px) {
.wrap {
display: inherit !important;
}
}
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
#media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
#media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
#media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
#media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.wrap {
display: inherit !important;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
#media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
#media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
#media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
So, the addition of
.wrap {
display: inherit !important
}
resolved the issue of differences in Safari and Firefox compared to Chrome. For the problem with the second section rendering vertically I noticed I had included padding-right of 2% to one of the divs without accounting for this in the divs width. Thanks for the help!
Related
So I am currently building a landing page for an app that will be soon coming online - However, I have only developed the iOS version so far and will start the android development once the iOS version has gone live.
Now, on my landing page - I have 2 buttons that will redirect to either the Apple store or Google play. For the apple store everything is fine, however I want to add a text that appears when going over the Google Play button which will say something like "coming soon!".
I have tried something but since I am not an expert when it comes to web development, the outcome below clearly shows that swell.. Can anyone help?
.home {
color: #3D464C
}
.home p {
color: #757F86
}
.home__header {
position: relative;
margin-bottom: 3em;
padding: 0 15px;
background: url("../images/jpg/home/header.f03ddb38.jpg") 0 80% no-repeat;
background-size: cover;
text-align: center
}
.home__header h1 {
margin-bottom: 100px;
font-size: 1.8em;
line-height: 1.4
}
.home__header .home__cta--web {
position: absolute;
bottom: -4em;
left: 0;
width: 100%
}
#media (min-width: 769px) {
.home__header {
background-size: cover;
background-position: 50% 80%
}
.home__header h1 {
margin-top: 100px;
margin-bottom: 0;
font-size: 2.4em
}
}
.home__app {
max-width: 300px;
margin: 90px auto 30px;
text-align: center
}
#media (min-width: 769px) {
.home__app {
margin: 30px auto 100px
}
}
.home__app li {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 7.5px
}
.home__cta--web {
display: block;
margin-top: 2.5em
}
.home .button {
margin-top: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.home__step {
padding: 50px 15px;
border-bottom: 1px solid #ddd
}
.home__step .illu__container {
margin: 0 auto
}
.home__step__desc {
max-width: 600px;
margin: 0 auto;
text-align: center
}
.home__step h2 {
font-size: 2em;
line-height: 1.4
}
.home__step--04 {
position: relative;
background: url("../images/jpg/home/04.9474e531.svg") no-repeat;
background-size: 80%;
background-position: center 0
}
#media (min-width: 769px) {
.home__step--04 {
background-size: 500px
}
}
.home__step--04 .home__step__illu {
padding: 0 40px;
max-width: 600px;
margin: 0 auto 30px
}
#media (min-width: 769px) {
.home__step {
padding: 100px 15px
}
.home__step--01 .home__step__illu,
.home__step--03 .home__step__illu {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 20px
}
.home__step--01 .home__step__illu .illu__container,
.home__step--03 .home__step__illu .illu__container {
margin-right: 0
}
.home__step--01 .home__step__desc,
.home__step--03 .home__step__desc {
text-align: left;
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle
}
}
<ul class="home__app hide-for-medium js-dl--app">
<li>
<a href="#" data-store="ios" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/appstore--en.4c7135ef.svg" alt="Download the iOS app"></picture>
</a>
</li>
<li>
<a href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/playstore--en.618c3ad6.svg" alt="Download the Android app"></picture>
</a>
</li>
</ul>
Current Outcome
Current outcome
If I understood your question. You want a the coming soon text to come up whenever anyone hover the playstore button. Please use the code below as reference.
Note : The .container div here is just for example. You should put the code inside .container in your li and make required changes with img src and other styles
.container{
width: 50%;
padding: 50px;
background: #444;
text-align: center;
}
.my-btn-class{
position: relative;
display: block;
}
.my-btn-class img{
max-width: 100%;
}
.my-btn-class:hover > .btn-over{
display: flex;
}
.btn-over{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
top: 0px;
align-items: center;
justify-content: center;
color:#ddd;
font-weight: 600;
}
<div class="container"><!--Example div. Use the below code in your li -->
<a class="my-btn-class" href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="http://via.placeholder.com/350x150" alt="Download the Android app"></picture>
<div class="btn-over">
Coming Soon
</div>
</a>
</div>
Hope this helps
I tried to use a couple of posts that were here for resizing for mobile devices but i can't seem to get it working. The margins keep pushing all the elements together when you view the site on a mobile device
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
`enter code here`margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
You are seeing this page on mobile devices like this
You need to change like this
then increase the nav bar width
(I tried width: 1520px; for Nav beacuse that is the background image size you were used)
There are a bunch of problems with your code. But the problem with the menu is because li is not taking the height of a. So the list items will stack one under another, and will li under li. Li being smaller than a.
Use display:block on a.
Also, I copied the code from your site, so it will be here if someone else comes looking for this answer. Tried to clean it up a bit but you have some styles that i don't understand, like .introPar1 { margin-left:400px;margin-right:400px}
Anyway, see code below
body img {
max-width: 100%;
height: auto;
}
/* TOP NAVIGATION */
nav ul li a {
text-decoration: none;
margin: 20px;
padding: 20px;
border-style: solid;
border-color: grey;
display: block;
}
nav ul li {
float: left;
}
nav ul {
list-style-type: none;
float: left;
}
nav {
background-color: #f2f2f2;
padding: 10px;
float: left;
width: 100%;
box-sizing: border-box;
}
/* NAV HOVER */
nav a:hover {
background-color: blue;
border-color: orange;
border-style: solid;
color: white;
transition: .3s;
}
/* BANNER */
.banner {
text-align: center;
}
.banner img {
border-style: solid;
border-width: 10px;
border-color: #87CEEB;
}
/* BODY ELEMENTS */
.home {
font-weight: bold;
font-size: 20px;
}
.temp {
text-align: center;
margin: auto;
padding: 20px;
}
/* BACKGROUND */
.bgimage img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
position: fixed;
}
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
nav ul li a {
margin: 5px;
padding: 10px;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
nav ul li {
width: 100%;
}
}
<div class="bgimage">
<img src="http://via.placeholder.com/1200x1000">
</div>
<nav>
<ul>
<li class="home">Crafts LLC</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>
<div class="Intro">
<article class="introPar1">
<h1><b><u>CRAFTS LLC</u></b></h1>
<br> Here at CRAFTS LLC, we offer you our 45 years of expertise of
<br> home repair advisory and remodeling services
<br>
<br> We are also here to help you with your estimation service needs
<br> and contractor referral services
<br>
<br> With CRAFTS LLC, you get both service and quality excellence.
<br> You need to look no further for your home repair and remodeling needs/solutions
<br>
</article>
</div>
<div class="contacts">
<p>Email to: craftsllc1#gmail.com or Call:813 347 7458</p>
</div>
Hey guys I am trying to apply flexbox on my wordpress site.
Based on what I know Flexbox is a shorthand of "Flexible Box Layout Module", which is a CSS3 module, standardized by the World Wide Web Consortium.
So I don't have to install anything, compliant browsers support it natively but for some reason it won't work on my site: http://americanbitcoinacademy.com/course-list/
Currently I am using flex on my codes:
<div class="flex">
<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<button class="btn btn-block btn-primary">PURCHASE COURSE →</button>
</div>
</div>
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 2.5%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
width: 100%;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
p{
line-height: 16px;
margin: 10px auto;
}
h4 {
margin: 0 0 20px 0;
}
}
.btn-block {
display: block;
width: 100%;
margin-top: 22px;
background: #DD374D;
}
button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
.flex {
display: flex;
flex-wrap: wrap;
}
Which will do the trick to have equal size of the boxes NO MATTER HOW LONG IS THE CONTENT on that page by default.
Any idea why does the flexbox doesnt work?
Thank you in advance.
Your code works. You are probably not testing in a flex box capable browser:
http://caniuse.com/#search=flexbox
To align buttons to bottom:
.col-1-3 {
position: relative;
padding-bottom: 40px; /* offset height of button */
}
button.btn-block{
position: absolute;
bottom: 0px;
width: calc(100% - 20px);
}
here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});
I don't have a web development background, but have a small business client who has me doing other things who got me working on their web site. I've designed a home page, more or less ready for me to turn it into a template in whatever CMS we decide to use.
It was going great until I started replacing blank divs with images. Now that I'm putting in the proxy images, everything is breaking down.
The primary issue is that the CSS attributes are not resizing the image, but the image at full size would be acceptable if the rest of the body actually flowed in such a way that the image wasn't covering it when rendered.
So far, I've tried adding height and with attributes to the img tag equal to both the actual height of the image and the height I'd like it to be. (310px for the desktop width.)
I've also tried nesting the image inside a div inside the section and applying widths there. I ended up with other problems, I assume from the shortcuts I took in the CSS, but even after changing how I was designating the description, it still was not resizing and the overflow was not being hidden.
Here's a JSFiddle.
The current HTML:
<body>
<header id="page-head" class="clearfix">
<div id="logo">Logo</div>
<h1>Academic Tours and Travel</h1>
<nav>
<ul class="clearfix">
<li><div>Travel With Us</div></li>
<li><div>Sign In</div></li>
</ul>
</nav>
</header>
<section id="feature">
<img src="https://i.imgur.com/CG8cppD.jpg">
<div>
<h1>Malta-Sicily Delight</h1>
<p>Our star tour. Visit Malta and Sicily with our hand crafted tours.</p>
</div>
</section>
<div id="content-wrap" class="clearfix">
<div id="right-wrap" class="clearfix">
<section id="about">
<header><h2>About</h2></header>
<p>Founded in 1984, Academic Tours and Travel is a leading specialist in travel to Malta and Sicily. They also are home to experts in many European destinations including Italy and Romania.</p>
</section>
<section id="pledge">
<header><h2>Our Pledge</h2></header>
<p><em>"From Concept to Completion"</em></p>
<p>Our agents will work with you from the first idea until you pick you unpack. If we ever recieve complaints from a local provider they are investigated and blacklisted for at least a year.</p>
</section>
<a href="">
<div id="call" class="clear">
<h1>Browse our Destinations</h1>
</div>
</a>
</div>
<section id="contact">
<header><h2>Contact an Agent</h2></header>
<form>
<label>Name: <input type="text" name="name" placeholder="Jane Doe" required="true" /></label><br />
<label>Email: <input type="text" name="email" placeholder="address#server.com" required="true" /></label><br />
<label>What's your dream vacation? <textarea name="destination" placeholder="Sample text" required></textarea></label><br />
<button type="submit">Send</button>
<button type="reset">Reset</button>
</form>
</section>
</div>
</body>
Current CSS:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* border: 1px solid black; */
}
html {
height: 100%;
}
a {
text-decoration: none;
}
body {
font-size: 62.5%;
margin: auto;
height: 600px;
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
button {
width: 47%;
margin-right: 5%;
display: inline-block;
}
button:last-child {
margin-right: 0;
}
h1 {
font-size: 2.1em;
text-align: center;
color: #c2d22d;
}
h2 {
font-size: 1.6em;
text-align: center;
color: #c2d22d;
}
header {
background-color: #134313;
}
input {
width: 100%;
}
img {
height: 100px;
}
label {
font-size: 1.2em;
}
nav ul {
min-width: 350px;
position: relative;
}
nav li {
display: inline;
list-style: none;
text-align: center;
padding-top: 12px;
width: 25%;
min-width: 60px;
background-color: #B3DFB3;
position: absolute;
height: 40px;
font-size: 1.3333em;
border-radius: 5px;
}
nav li:hover {
background-color: #A4B4C7;
}
nav li:first-child {
left: 20%;
}
nav li:last-child {
right: 20%;
}
nav li a {
text-decoration: none;
color: #010A01;
}
nav li a div {
height: 100%;
width: 100%;
}
p {
font-size: 1.2em;
}
section p {
padding: 0 10px;
}
textarea {
width: 100%;
}
#page-head {
width: 100%;
height: 120px;
}
#call {
min-height: 60px;
}
#call:hover {
background-color: #A4B4C7;
}
#call h1 {
color: #134313;
padding: 15px;
}
#content-wrap {
background-color:#E0FEE0;
}
#logo {
display: none;
}
#feature {
clear: both;
position: relative;
}
#feature div {
width: 77.5%;
margin: auto;
position: absolute;
left: 11.25%;
bottom: 3.8461%;
}
#media screen and (min-width: 425px) {
#about {
margin-right: 5%;
}
#about, #pledge {
width: 47.5%;
float: left;
}
#call {
font-size: 1.3333em;
}
}
#media screen and min-width: 600px) {
#page-head h1 {
max-width: 100%;
text-align: left;
float: left;
}
#page-head nav {
max-width: 60%;
float: right;
}
}
#media screen and (min-width: 740px) {
body {
max-width: 960px;
}
button {
width: 46%;
}
/* IDs for specific features. */
#contact {
width: 30%;
}
#content-wrap {
width: 100%;
min-height: 250px;
}
#feature {
min-height: 310px;
width: 83.3333%;
margin: auto;
position: relative;
}
#logo {
display: block;
}
#page-head {
height: 60px;
}
#page-head > * {
float: left;
}
#page-head > nav {
float: right;
}
#right-wrap {
width: 65%;
height: 100%;
float: right;
}
}
/* Utility classes. */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clear {
clear: both;
}
Try setting
Img{ width:100%}
And then edit the height of the section #feature to the height you want it to be. The image will fill the the width of the section.