I have two major problems with my code.
Problem 1 - Alignment: Inside the <nav> I created two <div> tags. One for the logo, and one for the hyperlinks, but I can't manage to align then. I've been stuck on this for hours.
Problem 2 - Overlapping: If the screen-size is a bit small, when I hover over an element of the navigation bar they overlap each other, which in theory is fine, however it doesn't cover the element behind, so both element keeps displaying.
Is there a way to prevent this from happening? btw, this problem only happens when I'm using a small screen size.
The image below can illustrate both problems:
body{
background-color: rgb(210,210,210);
margin:0px;
padding: 0px;
}
nav{
background-color: rgb(97, 97, 97);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
display: flex;
}
section{
padding: 0 10%;
}
#Logo{
width: 20%;
height: inherit;
float: left;
clear: left;
}
#Hyperlinks{
width: 80%;
float: right;
text-align: right;
}
#Logo p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 120%;
color: white;
padding-left: 40px;
}
#Hyperlinks a{
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks li li>a{
font-size: 1.1rem;
}
#Hyperlinks>ul>li:hover {
background-color: rgb(27, 129, 107);
border-radius: 0 0 10px 0;
}
#Hyperlinks ul li li:hover{
background-color: rgb(27, 129, 107);
}
#Hyperlinks ul ul li:last-child{
border-radius: 0 0 10px 0;
}
#Hyperlinks>ul>li>a{
border-right:solid white 3px;
}
#Hyperlinks ul{
padding-inline-start: 0;
}
#Hyperlinks>ul>li{
display: inline-block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul{
display: none;
}
#Hyperlinks>ul>li{
position: relative;
}
#Hyperlinks ul li:hover ul{
display: block;
position: absolute;
width: 92%;
left: 0%;
top: 42px;
background-color: rgb(97, 97, 97);
border-radius: 0 0 10px 0;
}
#Hyperlinks li:hover li{
display: block;
padding: 1em 0em 1em 5px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar 3</title>
<link rel="stylesheet" href="gabarito2.css">
</head>
<body>
<header>
<nav>
<div id="Logo">
<p>MySite.com</p>
</div>
<div id="Hyperlinks">
<ul>
<li>Home</li>
<li>Tutorial
<ul>
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
</ul>
</li>
<li>About</li>
<li>Newsletter
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section>
<h2>Test</h2>
<p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
</section>
</body>
</html>
Get rid of all the floats and use flexbox exclusively. Make sure your ul and li have no default margins and paddings.
Just set a background color and z-index if necessary.
Related
I feel like I've tried everything already. The website looks fine on my laptop, in chrome web developer tools, when checking iphone 6/7/8 plus, iphone x, ipad and ipad pro (so any height above 667px) my content is getting cut off, the footer disappears and half of the last page is gone on ipad.
I know it's the height, if I change the height property to something silly like 5000px and then of course my content is there but I've got loads of white space on other mobile devices so it's clear that's not the solution.
Here's what it looks like on a device like iphone 6 - perfectly normal
here is what I get on ihone X - the footer is goooone :(
Here's codepen: https://codepen.io/DiteIkporo/pen/vYOmMdK
Here is my css code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #ddd;
--dark: #002a3a;
--light: #fff;
--shadow: 0 3px 5px #000000;
--logo-color: #00b0b9;
--header-color: #3b89b9;
--btn2: #293857;
--grey: #6f7a90;
--shadow2: 0 0 8px #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
body{
font-family: arial, helvetica, sans-serif;
line-height: 1.6;
}
header {
padding: .5rem 2rem;
align-items: center;
width: 100%;
margin: 0;
background: var(--btn2);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1;
}
header #navbar{
display: flex;
justify-content: space-between;
}
#header-img{
width:8rem;
margin-left: -1rem;
}
#navbar ul{
display: flex;
}
#navbar ul li {
padding: 10px;
}
#navbar a{
color: var(--light);
text-transform: uppercase;
}
#navbar a:hover{
color: #eee;
font-weight: bold;
}
.product{
margin: 0;
background: url('../img/product.jpg') center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--light);
padding: 0 20px;
}
.product input{
padding: 0.3rem;
display: block;
margin: 0.9rem auto;
}
.product input#email{
width: 300px;
border-radius: 5px;
}
.product h1{
text-transform: uppercase;
font-size: 5rem;
line-height: 1.2;
}
.btn1 {
font-size: 1.2rem;
border-radius: 10px;
border: 1px #fff solid;
background: transparent;
color: var(--light);
}
.btn1:hover{
cursor: pointer;
}
.features {
background: url('../img/blue-close-up.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.box {
background: var(--btn2);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.box p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn2 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
border: solid #fff 1px;
border-radius: 5px;
padding: 0.5rem;
}
.pricing{
background: url('../img/blue-sky.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.level{
background: var(--header-color);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.level p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn3 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
padding: 0.5rem;
border-radius: 5px;
border: #fff solid 1px;
cursor: pointer;
}
.video {
background:url('../img/blue-close-up.jpg');
background-size: cover;
min-height: 100vh;
align-items: center;
display: flex;
align-items: center;
}
.block > iframe{
max-width: 560px;
width:100%;
box-shadow: var(--shadow);
}
.block{
/* background: var(--btn2); */
text-align: center;
/* box-shadow: var(--shadow); */
margin: auto;
width: 50%;
padding: 40px;
color: var(--light);
}
.block h2{
padding-bottom: 1.3rem;
}
.footer{
text-align: end;
padding: .5rem .5rem;
background: var(--btn2);
box-shadow: var(--shadow2);
position: relative;
}
.footer ul{
display: flex;
justify-content: flex-end;
}
.footer ul li{
margin-left: 1rem;
}
.footer ul li a{
color: var(--light);
}
.footer a:hover{
color: #eee;
font-weight: bold;
}
.footer span{
color: var(--light);
}
.price{
font-size: 2.5rem;
}
and this is my mobile.css
#navbar{
flex-direction: column;
align-items: center;
}
.product h1{
font-size: 3rem;
}
.features{
flex-direction: column;
padding:0;
}
.features h2{
font-size: 1rem;
}
.features p{
font-size: 0.8rem;
margin-bottom:0.2rem;
}
.box{
padding: 0.6rem;
margin: 1rem 2rem;
}
.btn2{
padding: 0.3rem;
}
.pricing{
flex-direction: column;
padding: 0;
}
.level{
padding:0.5rem;
margin: 1rem 2rem;
}
.level p{
padding:0.1rem;
margin-bottom:0.2rem;
font-size: 0.8rem;
}
.price {
font-size: 1rem;
}
.btn3{
padding:0.3rem;
}
.block {
padding: 10px;
width:80%;
}
this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DI Tech</title>
<script src="https://kit.fontawesome.com/fa769308d4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
</head>
<body>
<header id="header">
<nav id="navbar" class="main-nav">
<div class="logo">
<img id="header-img" src="img/fitbit-logo.png" alt="Fitbit logo">
</div>
<ul>
<li><a class="nav-link" href="#Product">Product</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="Product" class="product">
<h1>The future of tech is here</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, perspiciatis animi repellendus eum officiis amet obcaecati debitis, quidem facere quasi repellat ab laboriosam eius nesciunt non autem natus porro! Enim tempora quod sit laudantium!</p>
<form action="https://www.freecodecamp.com/email-submit" method="POST" id="form">
<input id="email" name="email" type="email" required placeholder="Enter Your Email...">
<input id="submit" type="submit" value="Subscribe" class="btn1"/>
</form>
</section>
<section id="Features" class="features">
<div class="box">
<i class="fas fa-cogs fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto perferendis ad necessitatibus magni obcaecati aperiam temporibus, quis odio iure.</p>
Read More
</div>
<div class="box">
<i class="fas fa-user-friends fa-2x"></i>
<h2>Lorem, Ipsum Dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ab beatae suscipit ipsam nulla voluptatibus nisi aut nam tempore veniam?
</p>
Read More
</div>
<div class="box">
<i class="fas fa-chart-line fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam amet quisquam tenetur? Exercitationem accusantium aliquid nesciunt.</p>
Read More
</div>
</section>
<section id="Pricing" class="pricing">
<div class="option">
<div class="level">Standard
<h2 class="price">£79</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Pro
<h2 class="price">£109</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Ultra
<h2 class="price">£159</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
</section>
<div class="video">
<div class="block">
<h2>Watch our most recent ad here</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/KTZH4Upbv4w?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="footer">
<footer>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<Span>DI Tech, Copyright © 2019</Span>
</footer>
</div>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Local JS File -->
<script src="js/main.js"></script>
</body>
</html>
Seems to be a bug in the dev tools as far as I can tell. I've had this problem in my own development too and I thought it was my fault. But after encountering it again today, I decided to look into it some more. I've gone on 3 reputable websites, viz. Stackoverflow, Gmail and freeCodeCamp, and selected the iPhone X in the dev tools to see if they had this problem too.
Lo and behold, they all do. You can just barely make out the content at the very end of the respective pages, and if you scroll up and then down quickly you can even see there's more content there that should be visible but just isn't.
So yeah, not a personal development flaw I don't think.
I am trying to learn SASS (not SCSS) and I am following their documentation, but the &hover is not working.
SASS:
a
color: red
&:hover
color: green
The generated CSS and HTML:
a {
color: red; }
a:hover {
color: green; }
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Ok, I am going to put here the complete code, and explain in a different way, maybe it will help you to help me.
The behaviour of my tags are not working properly in any of my browsers. No errors on my console as well.
Here's the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SASS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hi this is a test</h1>
</header>
<article>
<h2>about me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ducimus delectus, quod, itaque odio nostrum molestiae, reiciendis ipsum nobis nihil, placeat excepturi repudiandae aspernatur enim quisquam dicta fuga! Corrupti!</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</article>
<footer>
<p>copyright 2018 jorge</p>
</footer>
</body>
</html>
and the SASS document:
//SASS
// VARIABLES
$black: #333
$pale: #d2e1dd
$pink: #c69
$blue: #036
$font-stack: 'Andale Mono', monospace
$font-size: 14px
// MIXINS
=circleThing($rad, $height, $width, $bg, $color)
-webkit-border-radius: $rad
-moz-border-radius: $rad
-ms-border-radius: $rad
-o-border-radius: $rad
border-radius: $rad
height: $height
width: $width
line-height: $height
text-align: center
background: $bg
color: $color
margin: 0 auto
// STYLES
body
background: $pale
color: $black
font-family: $font-stack
font-size: $font-size
article
background: white
width: 760px
margin: -60px auto
padding: 40px
box-sizing: border-box
position: relative
z-index: -2
a
color: red
&:hover
color: green
header
+circleThing(100%, 200px, 200px, $blue, white)
h1
font-size: $font-size + 2
footer
+circleThing(100%, 150px, 150px, $black, $pale)
font-size: $font-size - 3
position: relative
z-index: -4
margin-top: -60px
This SASS is generating the CSS as below:
body {
background: #d2e1dd;
font-family: "Andale Mono", monospace;
font-size: 14px; }
article {
background: white;
width: 760px;
margin: -60px auto;
padding: 40px;
box-sizing: border-box;
position: relative;
z-index: -2; }
a {
color: red; }
a:hover {
color: green; }
header {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
background: #036;
color: white;
margin: 0 auto; }
header h1 {
font-size: 16px; }
footer {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
height: 150px;
width: 150px;
line-height: 150px;
text-align: center;
background: #333;
color: #d2e1dd;
margin: 0 auto;
font-size: 11px;
position: relative;
z-index: -4;
margin-top: -60px; }
The problem is: When I open this index file on my browser (either Chrome and Firefox) the tags does not change its color when hover, and even the cursor is not changing for a pointer. All the other elements are working perfectly, only the anchor tags have this issue. It seems to work correctly on code snippet, but I have no idea what is wrong, since the generated css looks correct.
I Changed my tag to another CSS (normal css) file, just to test, and it worked perfectly.
I've been struggling with this for a while and couldn't find the right solution.
At the bottom of the page I've a footer that's full width. Inside it I want to display I list of messages and right next to its left an icon, in this case it's a Font Awesome icon.
The message list needs to be centered both vertically and horizontally and the icon has to be centered vertically.
I've tried doing this using ul elements with display: inline-block and text-align: center.
The messages displays correctly but the icon is stuck in the same place no matter the size of its container.
Here's what I've so far:
<div class="error-message-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
and the css:
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin-top: 0;
padding: 0;
vertical-align: middle;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
https://jsfiddle.net/b1rw80jz/1/
Does anyone know how can I accomplish this?
Thanks
If you need only one icon, you can use pseudo-elements::before for the bell
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
position: relative; /** this provides reference to the ::before element **/
}
.error-message-list::before {
content: "\f1f6"; /** refers to awesome font **/
font-family: FontAwesome; /** refers to awesome font **/
position: absolute; /** this will stick to error-message-list **/
top: 50%; /** this will position the icon 50% height of the error-message-list **/
margin-top: -10px; /** minus half the icon height to truely vertically centered **/
left: -20px; /** this will push it to the left out the error-message-list **/
}
https://jsfiddle.net/b1rw80jz/6/
You could use flex-box like this:
+CSS
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin: 0;
padding: 0;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
.center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
+HTML
<div class="error-message-container center">
<ul class="error-message-bell center">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
Demo
You could add line-height: 5; vertical-align: top; to .error-message-container .error-message-bell.
Fiddle: https://jsfiddle.net/b1rw80jz/1/
Try to change the .error-message-list display to block and add margin-bottom: -5px; to .error-message-bell instead of margin-top
https://jsfiddle.net/b1rw80jz/3/
HTML
<div class="error-message-container">
<div class="inner-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
</div>
CSS
.inner-container{margin: 0 auto;
display: inline-block;}
.error-message-container .error-message-bell {
display: table-cell;
font-size: 20px;
height: 100%;
margin: 0 auto;
padding: 0;
vertical-align: middle;}
.error-message-container .error-message-list {
display: table-cell;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;}
Font-Awesome already does it for you by using the <i> element and nesting it within your <li>. Refer to documentation. BTW, I put a DANGER! icon in just for the hell of it.
<li><i class="fa fa-bell-slash-o" aria-hidden="true"></i> ERROR!</li>
FIDDLE
I am using display:flex in order to center/vertically center the content on the page. I have set a media query so that there is a hamburger menu for mobile size. However, there appears to be a right margin on the homePage. No matter what I try, I can't get the margin to go away. Here's a jsfiddle of it. Please help!
http://jsfiddle.net/crcommons/Lxepj9ko/2/
(p.s. make sure you adjust the browser size so that it is in mobile).
$('.hamburger').on('click', function() {
$('.menu').slideToggle();
});
function setPageHeight () {
var windowHeight = $(window).height();
var headerHeight = $('header').height();
pageHeight = (windowHeight - headerHeight);
$('.homePage').css('min-height', pageHeight + 'px');
};
setPageHeight();
$(window).resize(setPageHeight);
*, *:after, *:before {
box-sizing: border-box
}
body {
font-size: 18px;
}
.container {
margin: 0 auto;
}
nav {
background-color: white;
max-width: 100%;
padding-top: .75em;
}
.mainNav {
max-width: 1024px;
margin: 0 auto;
}
.mainNav li {
width: 19%;
display: inline-block;
border-right: 1px solid black;
text-align: center;
}
.mainNav li:last-child {
border-right: none;
}
.hamburger {
display: none;
line-height: .3em;
}
.hamburger:before {
content: "≡";
}
.homePage {
background-color: #CBD5D2;
max-width: 100%;
display: flex;
}
.introduction {
max-width: 40em;
margin: auto;
}
.logo {
text-align: center;
}
.tagline {
font-size: 3em;
text-align: center;
}
.introduction p {
text-align: justify;
}
#media screen and (max-width: 479px) {
.wrapper {
padding: 1.5em;
}
nav {
display: none;
}
.hamburger {
display: inline-block;
font-size: 3.5em;
text-decoration: none;
float: right;
}
.navigation {
float: left;
float: left;
position: absolute;
right: 0;
margin-top: 30px;
padding: 0;
background: gray;
}
.mainNav {
padding: 0;
}
.mainNav li {
display: block;
padding: .5em;
width: 100%;
}
.homePage {
padding: 1em;
}
.tagline {
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<header>
<div>
</div>
<nav class="navigation menu">
<ul class="mainNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="homePage">
<div class="introduction">
<h1 class="logo">Title</h1>
<h2 class="tagline">Lorem ipsum dolor sit.</h2>
<p class="introP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nam velit, voluptates dolore consequuntur ea tempore laborum mollitia, corporis impedit distinctio aperiam itaque perspiciatis repellat neque facilis esse molestiae maiores eum, incidunt eius quaerat! Dicta illo ut, incidunt ratione magni cum unde architecto obcaecati illum harum tempora veniam placeat voluptatem.</p>
</div>
</div>
</body>
One option to solve this would be within the .hamburger class media query setting position: absolute; right: 0px;
This is happening because .hamburger is floating right, and there is nothing to clear the float. .homepage has a max-width: 100% but the width is not set. Since the homepage isn't 100%, it will float around the hamburger.
Clear the float:
header::after {
content: '';
display: block;
clear: both;
}
Set homepage width to 100%:
.homepage {
background-color: #CBD5D2;
max-width: 100%;
width: 100%;
display: flex;
}
I'm having an issue with absolute and relative positing with regard to aligning an element to the bottom of another. I've set this up http://jsfiddle.net/sitrobotsit/xLahG/8/ to illustrate the problem. Basically, the bottom aligned element is overlapping the text above it.
HTML
<div class="subevents">
<ul id="events_gallery">
<li class="events_column">
<img src="http://placekitten.com/130/100">
<h3>Some heading</h3>
<p>Some vairable length text. Sed ut perspiciatis
unde omnis iste natus error sit voluptatem accusantium.</p>
<p class="bottom">Overlapping link</p>
</li>
</ul>
</div>
CSS
#events_gallery li {
border: solid 1px #999;
list-style-type: none;
position: relative;
width: 295px;
}
#events_gallery li p, #events_gallery li h3 {
left: 139px;
}
#events_gallery li img {
float: left;
}
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
Modify your design like this:
<div class="subevents">
<ul id="events_gallery">
<li class="events_column">
<img src="http://placekitten.com/130/100">
<h3>Some heading</h3>
<p class="content">Some vairable length text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. </p>
<p class="bottom">Find out more</p>
</li>
</ul>
</div>
and the CSS:
#events_gallery li {
border: solid 1px #999;
margin: 0 0 5px 0;
list-style-type: none;
position: relative;
width: 295px;
}
#events_gallery li p, #events_gallery li h3 {
padding: 0;
margin: 0 0 4px 139px;
}
#events_gallery li p.content {
margin-bottom:24px;
}
#events_gallery li img {
float: left;
margin: 0 5px 5px 0;
padding: 2px;
}
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
Remove position:absolute from
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
and see it here in action