Having just picked up grid I am having some issues when a site is being viewed in mobile. If I set a grid to have a height of 1200px then any elements after this should appear in normal document flow, right?
So how do we deal with this on mobile when a grid is stretched further than its original height value because from what I am experiencing the element after the grid is following the normal document flow and expecting the grid to be finished at 1200px and as a result appears behind the grid element.
Here is a gif to illustrate if anyone could shed light on this it would be super helpful all mark up below also (note on JS fiddle this "bug" does not exhibit itself)
https://gyazo.com/1f3d18693c8df5a339fb5fdc09e8d2c6
HTML
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title>Divine Tofu - Vegan Art and Apparel</title>
<link rel="stylesheet" href = "style/style.css" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "js/menuscript.js"></script>
</head>
<body>
<nav id="wrapper">
<div class="sideSpacer">
<div id="logoCont">
<img id="logo" src="images/navicons/logo.png" alt="Devine Tofu Logo" />
<div id="logoText"><img id = "logo" class="logotext" src="images/navicons/logotext.png"></div>
</div>
<div id="navWrapper">
<ul>
<a href="#apparel">
<li>Apparel</li>
</a>
<a href="#gal">
<li>Gallery</li>
</a>
<a href="#contactmetitle">
<li>Contact</li>
</a>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
<li>Etsy Store</li>
</a>
</ul>
</div>
<div id="logoCont">
<img id = "logo" class="logobot" src="images/navicons/bottomCircle.png" alt="Devine Tofu Logo" />
</div>
<div id="smWrap">
<ul id="smItems">
<li><img class="icon" src="images/navicons/fb.png" /></li>
<li><img class="icon" src="images/navicons/insta.png" /></li>
<li><img class="icon" src="images/navicons/twitter.png" /></li>
</ul>
</div>
</div>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
Etsy Store
</a>
</nav>
<div id = "grid">
<div id = "grid-item1">
<h1>Commissions</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, felis ut tempus pulvinar, lorem urna imperdiet velit, ac semper lectus dolor at odio. Proin vitae sapien ex. Sed at varius diam. Fusce sit amet nulla lacinia, sodales leo eu, porta urna. Vestibulum rhoncus facilisis nisl vel dapibus. Vestibulum mollis egestas bibendum. Curabitur fringilla felis vitae nunc efficitur viverra. Nunc eleifend faucibus sodales. Donec libero magna, efficitur vel nisi non, tempus tincidunt quam.</p>
<!-- Slider -->
<img src = "images/Gallery/gallery3.png">
</div>
<div id = "grid-item2">
<h1>Warcraft Chibis</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item3">
<img src = "images/chibi/tcomm5.png" id = "imgtrans">
<img src = "images/chibi/tcomm1.png" id = "imgtrans">
<img src = "images/chibi/tcomm3.png" id = "imgtrans">
<img src = "images/chibi/tcomm2.png" id = "imgtrans">
<img src = "images/chibi/tcomm7.png" id = "imgtrans">
<img src = "images/chibi/tcomm10.png" id = "imgtrans">
</div>
<div id = "grid-item4">
<br>
<h1>Original Artwork</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item5">
<img src = "images/Gallery/icongall1.png" id = "imgtrans">
<img src = "images/Gallery/icongall6.png" id = "imgtrans">
<img src = "images/Gallery/icongall3.png" id = "imgtrans">
<img src = "images/Gallery/icongall4.png" id = "imgtrans">
<img src = "images/Gallery/icongall5.png" id = "imgtrans">
<img src = "images/Gallery/icongall2.png" id = "imgtrans">
</div>
</div>
<!--This is the red bar -->
<div class = "aftergrid"> </div>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
.aftergrid {
width: 100%;
height: 40px;
background-color: red;
}
#grid {
margin: 0 auto;
display: grid;
max-width: 100%;
height:1200px;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(8,1fr);
grid-gap: 5px 5px;
}
#grid div {
background-color: hsla(126, 100%, 100%, 0.63);
box-shadow: 0px 20px 250px 10px #fffdd0 inset;
}
#grid:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.fixed-width {
max-width: 90%;
margin:0 auto;
}
h1 {
text-align: center;
}
#grid-item1{
background-color: aliceblue;
text-align: center;
}
#grid-item1 p{
position: relative;
margin-bottom: 1em;
padding: 1em;
animation-name: fadeinleft;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
#grid-item1 h1 {
position: relative;
animation-name: fadeinright;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
#keyframes fadeinleft{
0% {left:-50px;
opacity: 0;
}
80% {left: 10px;
}
100% {left:0px;
opacity: 1;}
}
#keyframes fadeinright {
0% {left:50px;
opacity: 0;
}
80% {left: -10px;
}
100% {left:0px;
opacity: 1;}
}
#grid-item1>img{
width: 80%;
}
#grid-item2{
grid-row: 4/5;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item2 p {
padding: 1em;
display: flex;
}
#grid-item3{
grid-row: 5/6;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#grid-item4{
grid-row: 6/7;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item4 p {
padding:1em;
}
#grid-item5{
grid-row: 7/8;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.icon {
max-width: 80%;
margin: 0 auto;
}
#imgtrans{
width: 32%;
transition: all .2s ease-in-out;
padding: 5px;
overflow: auto;
position: relative;
z-index: 3;
}
#imgtrans:hover{
transform: scale(1.1);
}
#navWrapper ul li:hover {
opacity: 1;
filter: alpha(opacity=0.5);
background-color: rgba(255, 74, 1, 0.54);
}
#navWrapper ul {
margin: 0 auto;
width:96%;
}
#navWrapper ul li {
text-align: center;
margin: 10px 5px 10px 0px;
padding: 1%;
color:white;
opacity: 0.6;
transition: background-color 0.25s, opacity 0.25s ease-in;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
width:98%;
font-size: 28px;
font-family: 'Shadows Into Light Two', cursive;
}
#navWrapper ul a {
text-decoration: none;
}
#parallax {
background-image: url(../images/parallaxbg.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
opacity: 0.1;
height: 100%;
width: 100%;
z-index: 0;
margin: 0 auto;
}
.sideSpacer {
position:fixed;
top:0;
left:0;
height:100vh;
width:220px;
background-color: hsla(36, 100%, 50%, 0.80);
z-index: 2;
transition: width .5s ease-out;
}
.sideSpacer:hover {
width:250px;
}
#flexcont{
display: block;
}
#flexlist{
height: 100%;
transition: all 1s;
}
#navIcons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobileLogo {
width:100px;
height: 100px;
}
.mobileNavButton {
width: 50px;
height: 50px;
align-self: center;
margin-right: 15px;
}
.mobileNavButton:hover {
cursor: pointer;
}
#smWrap {
width:100%;
}
#smItems{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
#smItems li{
text-align: center;
opacity: 0.6;
width:66px;
margin-bottom: 10px;
transition: width 2s, opacity 0.25s ease-in;
}
#smItems li:hover {
opacity: 0.9;
}
#logoCont{
margin:0 auto;
width:100%;
}
#logoCont{
font-weight: bold;
width: 100%;
opacity: 0.8;
color:white;
transition: width 2s, opacity 0.5s ease-in;
}
#logoCont:hover {
opacity: 1;
filter: alpha(opacity=0.5);
}
#logo{
max-width: 94%;
margin-left:3%;
margin-right:3%;
margin-top: 5%;
}
#logoText {
text-align: center;
}
.logobot{
max-width: 80%;
margin:10%;
padding-top: 1em;
}
#topNav {
width: 100%;
background-color: hsla(36, 100%, 50%, 0.80);
}
/* Tablet */
#media only screen and (min-width: 500px) {
#grid {
max-width: 90%;
margin: 0 auto;
}
.fixed-width {
width: 80%;
margin: 0 auto;
}
}
#media only screen and (max-width: 900px){
.sideSpacer {
display:none;
}
}
/* Desktop */
#media only screen and (min-width: 900px) {
#grid {
width: 70%;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12,1fr);
grid-gap: 5px 5px;
margin-left: 25%;
}
#grid-item1{
grid-row: 2/12;
grid-column: 5/9;
background-color: aliceblue;
}
#grid-item2{
grid-row: 1/4;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item3{
grid-row: 4/7;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item4{
grid-row: 7/10;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item5{
grid-row: 10/13;
grid-column: 1/4;
background-color: aliceblue;
}
#topNav {
display: none;
}
.aftergrid {
margin-top: 25px;
}
}
I have solved it I should have been using height auto all along.
Related
I'm very close to having solved this problem, by nesting a 1:1 grid instead of using flex and position: absolute; however, while it seems to really, really work on Chrome and Firefox, on Safari my backface is visible:
Super curiously, in dark mode, it appears to briefly work properly, before the backside takes over:
How do I make it so that my "flipped" card only shows the correct content? Can I Use seems to think backface-visibility has been supported in Safari ~ forever. Is this a new bug? Am I doing something wrong?
(FYI, I'm using Safari 16.0)
Fiddle:
.flip {
perspective: 600;
display: flex;
}
.flip-content {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
margin-left: auto;
margin-right: auto;
transition: 0.4s;
transform-style: preserve-3d;
width: 100%;
}
.flip:hover .flip-content {
transform: rotateY(180deg);
transition: transform 0.3s;
}
.flip-front,
.flip-back {
backface-visibility: hidden;
grid-column-start: 1;
grid-row-start: 1;
margin-left: auto;
margin-right: auto;
max-width: 24rem;
overflow: hidden;
width: 100%;
}
.flip-back {
transform: rotateY(180deg);
}
#media (prefers-color-scheme: dark) {
.flip-front,
.flip-back {
background-color: rgb(30, 41, 59);
color: rgb(226, 232, 240);
}
}
.container {
width: 450px;
}
<div class="container">
<div class="flip">
<div class="flip-content">
<div class="flip-front">
<h2>Step 1:<br>Lorem ipsum dolor sit amet</h2>
</div>
<div class="flip-back">
<p>Maecenas justo purus, semper id feugiat in, ornare vel urna. Pellentesque maximus tortor metus, eu posuere velit ullamcorper sit amet.</p>
</div>
</div>
</div>
</div>
I ran into a similar issue on Safari, and the janky workaround I came up with was to adjust the opacity of front/back on transform. Seems to work fine in both Safari/Chrome, and appears to work with dark mode as well.
.flip {
perspective: 600;
display: flex;
}
.flip-content {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
margin-left: auto;
margin-right: auto;
transition: 0.4s;
transform-style: preserve-3d;
width: 100%;
}
.flip:hover .flip-content {
transform: rotateY(180deg);
transition: transform 0.3s;
}
.flip-front,
.flip-back {
backface-visibility: hidden;
grid-column-start: 1;
grid-row-start: 1;
margin-left: auto;
margin-right: auto;
max-width: 24rem;
overflow: hidden;
width: 100%;
}
.flip-front {
opacity: 100%;
}
.flip-back {
transform: rotateY(180deg);
opacity: 0%;
}
.flip:hover .flip-content .flip-front {
opacity: 0%;
}
.flip:hover .flip-content .flip-back {
opacity: 100%;
}
#media (prefers-color-scheme: dark) {
.flip-front,
.flip-back {
background-color: rgb(30, 41, 59);
color: rgb(226, 232, 240);
}
}
.container {
width: 450px;
}
<div class="container">
<div class="flip">
<div class="flip-content">
<div class="flip-front">
<h2>Step 1:<br>Lorem ipsum dolor sit amet</h2>
</div>
<div class="flip-back">
<p>Maecenas justo purus, semper id feugiat in, ornare vel urna. Pellentesque maximus tortor metus, eu posuere velit ullamcorper sit amet.</p>
</div>
</div>
</div>
</div>
I'm beginner to CSS & HTMl, and for now I am practicing on templates, i wanted to make a zoom effect using transform scale and overflow hidden (without overflowing the image borders, as in Snapshot Template), i made transform scale JSFiddle, but i didn't manage to make a trick and make zoom effect, can anyone help me?
.gallery-grid img {
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
width: 100%;
height: 100%;
overflow: hidden;
}
Wrap every image into a container div and give overflow: hidden to it
<div class="image-container">
<img src="https://i.ibb.co/G9CYqz6/01.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/pbjtTMD/05.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/ckv3dPy/09.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/p0kYsQR/02.jpg">
</div>
...
and
.image-container {
overflow: hidden
}
You can not apply overflow: hidden on an img.
You should apply it to the container which you do not want it to bleed out of.
you may use z-indexand position , so scaled element remains under others. Also lay theme all the way throught and all the way down, overflow on the container will be hidding what overflows from the top and the bottom of itself.
To avoid to deal with this this way, wrap each image in a container , so overflow works for each of them.
Demo from your HTML and CSS updated
https://jsfiddle.net/c5ae48vL/
modification made on lines about z-index and container grid-column and height:
// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176
or snippet below
// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176
// and transition turned to transform instead all
<!DOCTYPE html>
<!-- https://templated.co/snapshot -->
<html lang="en">
<head>
<title>Snapshot</title>
<style>
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
font-family: "Roboto Light";
}
body {
width: 100%;
height: 100%;
}
/* Side Nav Bar */
aside {
width: 5%;
height: 100%;
font-size: 22px;
text-align: center;
background: rgb(13, 18, 23);
position: fixed;
z-index: 4;
}
aside i {
margin-top: 40px;
color: rgb(134, 137, 139);
}
aside i:hover {
color: white;
}
aside i:active {
color: rgb(134, 137, 139);
}
.fas.fa-home {
color: #19b5fe;
}
/* End Of Side Nav Bar */
/* Main Section */
main {
width: 95%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
#banner-img {
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
height: 500px;
z-index: 2;
}
.banner {
background-image: url("https://i.ibb.co/KKpJvX3/banner.jpg");
width: 100%;
height: 500px;
position: fixed;
overflow: hidden;
}
.main-fore {
text-align: center;
position: relative;
color: white;
z-index: 3;
margin-top: 15%;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.main-fore h1 {
font-size: 50px;
margin-bottom: 10%;
}
.main-fore h2 {
border: 2px solid rgb(82, 72, 63);
border-radius: 5px;
padding-top: 15px;
padding-bottom: 15px;
width: 15%;
margin-right: auto;
margin-left: auto;
}
.main-fore h2:hover {
background: rgba(72, 57, 44, .2);
color: white;
cursor: pointer;
user-select: none;
}
/* End Of Main Section */
/* Gallery Section - What's New */
.gallery {
position: absolute;
z-index: 3;
top: 500px;
right: 0;
margin-right: 0;
width: 95%;
text-align: center;
height: 800px;
background: #f1f1f1;
}
#g-head {
margin-top: 5%;
margin-bottom: 3%;
color: rgb(34, 49, 63);
font-size: 25px;
}
.gallery-grid img {
-webkit-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out;
width: 100%;
height: 100%;
overflow: hidden;
position:relative;
z-index:10;
}
.gallery-grid img:hover {
-webkit-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
z-index:0;
}
.gallery-grid {
width: 100%;
/* height: 100%;*/ max-width: 1000px;margin:0 auto;
margin-left: auto;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 27% 27%;
grid-template-areas: ". . . ." ". . . .";
}
#g-button {
position: relative;
bottom: 200px;
text-decoration: none;
outline: none;
padding: 15px 50px;
font-size: 22px;
font-weight: 500;
color: white;
background: #19b5fe;
transition: all .2s ease-in-out;
border-radius: 5px;
z-index:20;
}
#g-button:hover {
color: white;
background: rgb(1, 155, 227);
}
/* End Of What's New Section */
/* About Me Section */
.aboutme {
width: 47.5%;
position: absolute;
top: 1300px;
z-index: 3;
background: #e6e6e6;
right: 47%;
color: rgb(34,49,63);
height: 70%;
}
.aboutme h1 {
font-size: 20px;
margin-top: 7%;
margin-left: 10%;
}
.aboutme p {
margin-left: 10%;
margin-top: 4%;
margin-right: 7%;
line-height: 25px;
font-size: 13px;
}
.socialicons i {
position: relative;
left: 10%;
top: 20px;
font-size: 25px;
user-select: none;
color: #19b5fe;
margin: 3px;
}
.socialicons i:hover {
color: rgb(1, 155, 227);
}
/* End Of About Me Section */
/* Message Section */
.message {
width: 47.5%;
position: absolute;
top: 1300px;
background: #ececec;
right: 0;
z-index: 3;
height: 70%;
}
.message h1 {
font-size: 20px;
color: rgb(34,49,63);
margin-top: 7%;
margin-left: 10%;
}
.name_email {
display: flex;
margin-top: 5%;
font-size: 16px;
}
.name_field {
flex: 0 0 50%;
margin-left: 10%;
}
.email_field {
flex: 1;
}
.message_field {
margin-left: 10%;
margin-top: 5%;
}
.email_field input, .name_field input, .message_field textarea {
padding: 10px;
width: 75%;
border: 1px solid #bde6fc;
}
#submit_button {
margin-left: 10%;
margin-top: 10%;
background: #19b5fe;
color: white;
padding: 2% 7%;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 17px;
font-weight: 500;
}
#submit_button:hover {
background: rgb(1, 155, 227);
}
/* End Of Message Section */
/* Footer Section */
#footer-cap {
font-size: 13px;
text-align: center;
position: relative;
top: 30%;
color: black;
}
.no1-img {
overflow: hidden;
}
</style>
</head>
<body>
<aside>
<i class="fas fa-home"></i><br>
<i class="fas fa-camera-retro"></i><br>
<i class="fas fa-file-alt"></i>
</aside>
<main>
<div class="banner">
<div id="banner-img"></div>
</div>
<div class="main-fore">
<h1>Hey, I'm Snapshot</h1>
<h2>Continue</h2>
</div>
</main>
<div class="gallery">
<h1 id="g-head">What's New</h1>
<div class="gallery-grid">
<img src="https://i.ibb.co/G9CYqz6/01.jpg">
<img src="https://i.ibb.co/pbjtTMD/05.jpg">
<img src="https://i.ibb.co/ckv3dPy/09.jpg">
<img src="https://i.ibb.co/p0kYsQR/02.jpg">
<img src="https://i.ibb.co/7pgbSk9/06.jpg">
<img src="https://i.ibb.co/0F93gYK/10.jpg">
<img src="https://i.ibb.co/0Yw8zwd/03.jpg">
<img src="https://i.ibb.co/wwnzstm/07.jpg">
</div>
<a id="g-button" href="gallery.html">Full Gallery</a>
</div>
<div class="middlediv">
<div class="aboutme">
<h1>About Me</h1>
<p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.<br><br><br>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p>
<h1>Follow Me</h1>
<div class="socialicons">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<!-- Message Section -->
<div class="message">
<h1>Get in Touch</h1>
<form action="#" method="POST" id="message_form">
<div class="name_email">
<div class="name_field">
<label for="name">Name</label><br><br>
<input type="text" placeholder="Name" id="name" name="user_name" required>
</div>
<div class="email_field">
<label for="email">Email</label><br><br>
<input type="email" id="email" placeholder="Email" name="user_email" required>
</div>
</div>
<div class="message_field">
<label for="message_area">Message</label><br><br>
<textarea cols="20" rows="7" id="message_area" placeholder="Message" name="user_message" required></textarea>
</div>
<input id="submit_button" type="submit" value="Send" form="message_form">
</form>
</div>
</div>
<!-- End Of Message Section -->
<footer>
<div style="width:95%; height: 100px; position: relative; z-index: 3; background: rgb(242, 242, 242); top: 1900px; right: 0; left: 5%;" class="footer">
<p id="footer-cap">© Snapshot: HASHEM. Images: Unsplash.</p>
</div>
</footer>
</body>
</html>
how can I add a space between those 2 images and dont allow the text to break on the center of the page? It's for a college project and I've never programmed before.
i actually dont know whats going on on this template i have to edit.. i just need to add a photo of a person in the image circle (which i know how to) and a text of their review, but the images keep going off position and text breaks in the middle..
/*
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
#import url("font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/* Basic */
}
body {
background: #222833;
}
body,
input,
select,
textarea {
color: #555555;
font-family: 'Raleway', sans-serif;
font-size: 13pt;
font-weight: 300;
line-height: 1.75em;
}
a {
color: #3ac984;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
p,
ul,
ol,
dl,
table,
blockquote {
margin: 0 0 2em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 700;
line-height: 1.75em;
margin-bottom: 1em;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border-top: solid 1px #888888;
border: 0;
margin-bottom: 1.5em;
}
blockquote {
border-left: solid 0.5em #888888;
font-style: italic;
padding: 1em 0 1em 2em;
}
section.special,
article.special {
text-align: center;
}
header.major {
padding-bottom: 4em;
}
header h2 {
margin: 0;
padding: 0;
font-size: 3em;
font-weight: 600;
}
header .byline {
font-size: 1.6em;
}
footer> :last-child {
margin-bottom: 0;
}
footer.major {
padding-top: 3em;
}
/* Form */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
background: none;
border: solid 1px #888888;
color: inherit;
display: block;
outline: 0;
padding: 0.75em;
text-decoration: none;
width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3ac984;
}
input[type="text"],
input[type="password"],
input[type="email"] {
line-height: 1em;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.5;
position: relative;
top: 3px;
}
:-moz-placeholder {
color: inherit;
opacity: 0.5;
}
::-moz-placeholder {
color: inherit;
opacity: 0.5;
}
:-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
.formerize-placeholder {
color: rgba(85, 85, 85, 0.5) !important;
}
/* Image */
.image {
border: 0;
position: relative;
}
.image.fit {
display: block;
}
.image.fit img {
display: block;
width: 100%;
}
.image.feature {
display: block;
margin: 0 0 2em 0;
}
.image.feature img {
display: block;
width: 100%;
}
.image.feature2 {
display: block;
margin: 0 0 5em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left margin 40px;
}
/* Icon */
.icon {
position: relative;
}
.icon:before {
content: "";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon>.label {
display: none;
}
/* Lists */
ol.default {
list-style: decimal;
padding-left: 1.25em;
}
ol.default li {
padding-left: 0.25em;
}
ul {
margin: 0;
padding: 0;
}
ul.default {
list-style: none;
}
ul.default li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.default> :first-child {
padding-top: 0;
border-top: none;
}
ul.icons {
cursor: default;
}
ul.icons li {
display: inline-block;
line-height: 1em;
padding-left: 0.5em;
}
ul.icons li:first-child {
padding-left: 0;
}
ul.actions {
cursor: default;
}
ul.actions:last-child {
margin-bottom: 0;
}
ul.actions li {
display: inline-block;
padding: 0 0 0 1.5em;
}
ul.actions li:first-child {
padding: 0;
}
ul.actions.vertical li {
display: block;
padding: 1.5em 0 0 0;
}
ul.actions.vertical li:first-child {
padding: 0;
}
ul.contact li {
padding: 1.05em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.contact li>span {
display: inline-block;
}
ul.contact li .address,
ul.contact li .mail,
ul.contact li .phone {
float: left;
width: 100px;
font-weight: 600;
}
ul.contact> :first-child {
padding-top: 0;
border-top: none;
}
ul.style li {
clear: both;
display: block;
padding-top: 3em;
}
ul.style> :first-child {
padding-top: 0;
}
ul.style h3 {
display: block;
margin: 0;
padding-bottom: 0.50em;
font-size: 1.1em;
font-weight: 700;
color: #404040;
}
ul.style .fa {
float: left;
display: inline-block;
width: 80px;
height: 80px;
margin-right: 1em;
background: #3ac984;
line-height: 80px;
text-align: center;
border-radius: 10px;
font-size: 2em;
color: white;
}
ul.list {
list-style: none;
}
ul.list li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: red;
}
ul.list> :first-child {
padding-top: 0;
border-top: none;
}
/* Tables */
table {
width: 100%;
}
table.default {
width: 100%;
}
table.default tbody tr {
border-bottom: solid 1px #888888;
}
table.default td {
padding: 0.5em 1em 0.5em 1em;
}
table.default th {
font-weight: 700;
padding: 0.5em 1em 0.5em 1em;
text-align: left;
}
table.default thead {
background: #555555;
color: #fff;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background: #3ac984;
border-radius: 40px;
border: 0;
color: white;
cursor: pointer;
display: inline-block;
padding: 0.80em 2em;
text-align: center;
text-decoration: none;
font-size: 1.4em;
font-weight: 600;
min-width: 10em;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
background-color: #32b777;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
font-size: 0.8em;
}
/* Wrapper */
.wrapper.style1 {
background: #fff;
}
.wrapper.style2 {
background: #ececec;
padding: 6em 0;
text-align: center;
}
.wrapper.style4 {
background: #ececec;
padding: 1em 0;
text-align: center;
}
.wrapper.style3 {
padding: 2em 0 3.5em 0;
background: #ececec;
}
.wrapper.style3 span {
display: inline-block;
padding-top: 0.80em;
font-size: 2em;
font-weight: 600;
}
.wrapper.style3 .button {
float: right;
}
/* Header */
#header {
background: #333333 url("../images/pic01.jpg") no-repeat;
background-size: cover;
color: #fff;
padding: 6em 0;
text-align: center;
background-position: 0% 65%;
position: relative;
}
#header:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(16, 32, 48, 0.25);
}
#header>* {
position: relative;
z-index: 1;
}
.homepage #header {
padding: 8em 0;
background-position: center;
}
#logo {
font-size: 2em;
}
#nav>ul {
margin: 0;
}
#nav>ul>li {
border-radius: 10px 10px 0 0;
display: inline-block;
margin-left: 0.5em;
padding: 0.5em 1.5em;
}
#nav>ul>li a {
color: #FFF;
text-decoration: none;
font-size: 1.2em;
}
#nav>ul>li:first-child {
margin-left: 0;
}
#nav>ul>li:hover a {
color: #fff;
}
#nav>ul>li.active {
background: #3ac984;
}
#nav>ul>li.active a {
color: white;
}
#nav>ul>li>ul {
display: none;
}
/* Dropotron */
.dropotron {
margin-top: -2px;
background: #3ac984;
border-radius: 10px;
color: white;
min-width: 12em;
padding: 1em 0;
}
.dropotron>li {
line-height: 2em;
padding: 0 1em;
}
.dropotron>li>a {
color: #FFF;
text-decoration: none;
}
.dropotron>li.active>a,
.dropotron>li:hover>a {
color: #FFF;
}
.dropotron.level-0 {
border-radius: 0 10px 10px 10px;
font-size: 1em;
}
/* Banner */
#banner {
text-align: center;
padding: 4em 0 0 0;
}
#banner .major h2 {
font-size: 3.5em;
}
#banner .major .byline {
display: block;
margin: 0em 2em;
line-height: 1.6em;
font-size: 1.5em;
}
#banner a {
color: inherit;
}
/* Main */
.no-sidebar #main .major,
.left-sidebar #main .major,
.right-sidebar #main .major {
text-align: left;
}
.homepage #main .major {
text-align: center;
}
#main {
padding: 6em 0;
}
#main .sidebar .major {
padding-bottom: 2em;
}
#main .sidebar .major h2 {
font-size: 1.8em;
}
#main .sidebar .default li {
border-color: #cdcdcd;
}
#main .sidebar .default a {
color: #464646;
}
#main .sidebar> :first-child {
margin-bottom: 3em;
}
/* Footer */
#footer {
padding: 4em 0;
color: #fff;
}
#footer .major h2 {
font-size: 2em;
color: #FFF;
}
#footer .major .byline {
font-size: 1.1em;
}
#footer .copyright {
margin-top: 3em;
padding-top: 3em;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
text-align: center;
color: inherit;
}
#footer a {
color: inherit;
}
#middle {
height: 600px;
width: 300px;
background: green;
}
<!DOCTYPE HTML>
<!--
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Horizons by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1>Vista 702</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Fotos</li>
<li>Depoimentos</li>
<li>Planos</li>
</nav>
<!-- Banner -->
<div id="banner">
<div class="container">
<section>
<header class="major">
<h2>Vista 702</h2>
<span class="byline">… a melhor vista de Juiz de Fora para se passar o feriado, réveillon e comemorações em geral.</span>
</header>
Sign Up
</section>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="fotos"></a>
<h2>Fotos</h2>
<span class="byline">Sua visita começa aqui.</span>
</header>
<div class="row no-collapse-1">
<section class="4u">
<a class="image feature"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic03.jpg" alt=""></a>
<p>Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis. Donec magna.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic04.jpg" alt=""></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="depoimentos"></a>
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left"=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<!-- Main -->
<div id="main" class="wrapper style1">
<section class="container">
<header class="major">
<a id="planos"></a>
<h2>Uma janelas, diversas</h2>
<span class="byline">Um plano para todos os bolsos.</span>
</header>
<div class="row">
<!-- Content -->
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-wrench"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-cloud"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-cogs"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-leaf"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Lists -->
<div class="row">
<div class="8u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Quisque semper augue mattis wisi maecenas ligula</span>
</header>
<div class="row">
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
</div>
</section>
</div>
<div class="4u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Mattis wisi maecenas ligula</span>
</header>
<ul class="contact">
<li>
<span class="address">Address</span>
<span>1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
</li>
<li>
<span class="mail">Mail</span>
<span>someone#untitled.tld</span>
</li>
<li>
<span class="phone">Phone</span>
<span>(000) 000-0000</span>
</li>
</ul>
</section>
</div>
</div>
<!-- Copyright -->
<div class="copyright">
Design: TEMPLATED Images: Unsplash (CC0)
</div>
</div>
</div>
<a id="middle"></a>
</body>
</html>
thanks
Just use white-space: nowrap on the text element to make the text stay on the same line regardless of the parents size.
And for the images, you need to either add margin or padding on the parent container.
i.e,
.4u p {
white-space: nowrap;
}
and
.4u{
padding: 0.23em;
}
or
.4u{
margin: 0.23em;
}
apparently the footer background went missing too
Edited:
This is the changes I made to your code
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-item + .flex-item {
margin-top: 30px;
}
.image.feature2 {
display: block;
margin: 0 0 7em 0;
}
<div class="row no-collapse-1">
<div class="flex">
<section class="flex-item">
<a class="image feature2"><img
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="flex-item">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
I'm trying to make my footer to be always displayed on the bottom of the page when there is no enough content. I've tried several solutions but none of them worked. Also, there is a small issue with the dropdown menu - the text moves when I hover over this component. What should I change in my CSS? Thanks!
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
You need to use position:fixed to put the footer at the bottom of the page.
#footerwrap {
width: 1000px;
margin: 0 auto;
position: fixed;
bottom:0;
}
As for the text shifting slideToggle seems to be shifting the padding of the test list item. By setting the padding in the style itself it fixes the problem.
<li ><a style="padding:0 38%">test</a>
Here is a working snippet that solves your navigation issue. I added comments in the CSS so you can better understand what changes I made. I used some flex-box to fix the issue. Super simple. As for the footer, there are lots of ways you can achieve this so I will post a link to an article that shows you 5 different ways to do it and you can pick whichever one works best for your use case. Hope this helps :)
P.S. As a side note, I noticed in your markup that you had a class called sub-menu which is not being used in your CSS. Not a big deal just thought I'd point it out. You probably have plans for it later on.
Here are some footer options
$(document).ready(function() {
$('li').hover(function() {
$(this).find('ul>li').stop().slideToggle(250);
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
/* removed display property as it was not needed
display inline-block was causing the nav item to shift over*/
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a {
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
/* Added display flex to container with
justify-content center to keep nav items aligned*/
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
display: flex;
justify-content: center
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display: none;
height: 40px;
}
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br>
<br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<br>
<br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
I need a help I am trying to achieve animation on hamburger menu checked and unchecked. I am able to animate menu but I can not figure out how to animate left menu animation on transform to 0
&__menu {
transform: translateX(-100%);
transition: 1s ease-in-out;
// .c-hamburger--icon ~ &{
// transition: all 300ms;
// }
.c-hamburger--icon:checked ~ &{
height: 100vh;
background: #000;
width: 270px;
transform: translateX(0);
top: 0;
opacity: .7;
position: fixed;
}
}
Here is the CodePen Demo.
Apply the height and width properties to the default state of the element instead of applying it only after the menu is checked. Default values for height and width properties is auto and we cannot transition from or to auto. Thus it was resulting in an immediate hiding of the menu instead of a slow transition.
As you are using a transform: translateX(-100%) to hide the menu initially, even setting a default height and width to the element will not affect the layout. Demo with the compiled CSS is added below.
&__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
.c-hamburger--icon:checked ~ &{
background: #000;
transform: translateX(0);
opacity: .7;
}
}
Another thing to note is that the position property should also be set on the default state itself. This is needed because the position is not a transitionable property.
#import url("https://fonts.googleapis.com/css?family=Titillium+Web");
* {
padding: 0;
margin: 0;
font-size: medium;
font-family: 'Titillium Web', sans-serif;
}
.l-app__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .l-app__menu {
transform: translateX(0);
background: #000;
opacity: .7;
}
.l-app__left {
float: left;
position: fixed;
background: #185a9d;
width: 50%;
height: 100%;
overflow: hidden;
}
#media (max-width: 1200px) {
.l-app__left {
position: static;
width: 100%;
height: 100vh;
background: #fff;
}
}
.l-app__right {
float: right;
background: #fff;
width: 50%;
height: 100vh;
}
#media (max-width: 1200px) {
.l-app__right {
position: static;
width: 100%;
background: #bfbfbf;
}
}
.l-app__right--inner {
padding: 50px;
}
.l-app__hamburger {
position: fixed;
z-index: 1;
}
.c-bike__image {
background: url(http://bikeshopgirl.com/wp-content/uploads/2011/10/15038.jpg) no-repeat;
background-size: contain;
min-height: 100%;
opacity: .9;
top: 0;
position: relative;
}
#media (max-width: 1200px) {
.c-bike__image {
position: static;
width: auto;
opacity: 1;
}
}
.c-bike__header {
font-size: 150%;
padding: 15px;
}
#media (max-width: 1200px) {
.c-bike__header {
padding: 0;
}
}
.c-bike__article {
letter-spacing: .3px;
padding: 10px;
}
.c-bike__article.c-bike__header {
font-size: 120%;
padding: 0;
}
.c-hamburger {
background: transparent;
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background .3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger--icon {
display: none;
}
.c-hamburger--icon ~ .c-hamburger--htx {
transition: transform 1s;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx {
transform: translate(250px, 0) rotate(90deg);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span {
background: none;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger--htx__span {
transition: transform .5s;
}
.c-hamburger--htx__span::before {
transition-property: top, transform;
}
.c-hamburger--htx__span:after {
transition-property: bottom, transform;
}
.c-hamburger__span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: #930202;
border-radius: 5px;
}
.c-hamburger__span::before,
.c-hamburger__span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background: #930202;
border-radius: 5px;
content: "";
}
.c-hamburger__span::before {
top: -20px;
}
.c-hamburger__span::after {
bottom: -20px;
}
<div class="l-app">
<div class="l-app__hamburger">
<input id="c-hamburger--icon" type="checkbox" name="c-hamburger" class="c-hamburger--icon" />
<label for="c-hamburger--icon" class="c-hamburger c-hamburger--htx">
<span class="c-hamburger__span"></span>
</label>
<nav class="l-app__menu"></nav>
</div>
<div class="l-app__left">
<div class="l-app__left--inner c-bike__image"></div>
</div>
<div class="l-app__right">
<div class="l-app__right--inner">
<section class="c-bike">
<header>
<h3 class="c-bike__header">Bike name</h3>
</header>
<article class="c-bike__article">
<header>
<h4 class="c-bike__article c-bike__header">Secion name</h4>
</header>
<p class="c-bike__article c-bike__paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis diam egestas, dictum augue ut, dignissim lorem. Integer eros felis, sodales at viverra et, ultricies malesuada lacus. Nullam ex orci, vulputate vitae porta eu, gravida vel arcu. Curabitur
mattis quis dolor sit amet dapibus. Etiam mattis diam id rhoncus tempor. Phasellus tristique auctor luctus. Nulla ullamcorper tempus porttitor. Sed et tincidunt sem. Morbi dictum ut orci sit amet pretium. Integer feugiat enim vitae neque commodo,
ac malesuada lacus scelerisque. Donec quis odio in ipsum facilisis auctor. Vestibulum turpis turpis, blandit sit amet tempus sed, facilisis nec tellus. Morbi elementum vulputate sem a rhoncus. Vivamus bibendum congue velit, ac hendrerit est
suscipit ac. Nunc a molestie libero.
</p>
</article>
</section>
</div>
</div>
</div>