I'm trying to make the text-info element display only when I hover over the container element using only CSS and no JS and it doesn't work, would love some advice.
I was assuming it had something to do with the display flex instead of display block so I attempted that too, but it didn't help.
Note that even without the hover, the text doesn't display on the page and I can't tell why.
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover+.text-info {
display: flex;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
You are using the wrong css selector for your hover style. You are using the + selector which is the sibling selector and .text-info is a child not a sibling of .container.
Also, you would need to set your opacity to 1 on hover so that you can see it.
Like this:
.container:hover .text-info {
display: flex;
opacity: 1;
}
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover .text-info {
display: flex;
opacity: 1;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
As long as text-info opacity is set to 0 normally, you can use the following sibling selector ~ in your CSS to set the opacity to 1 on hover. See below.
.text-code:hover ~ .text-info {
opacity: 1;
}
See it in action
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.text-info {
color: black;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
.text-code:hover ~ .text-info {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>404 Page</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
</body>
</html>
Related
I'm having issues placing a small image at the right of a container.
For one reason or another, the container app-banniere-utilisateur__stand
is trying to grow in width, even though I added flex-grow: 0;
While searching, I found out that the img tag within that container
is actually enforcing it's max-width as if I wrote width. (see comment at the end of CSS)
On the code snippet, I added a red background on the extra-width that shouldn't exists.
I'm not sure how it happened, any idea on how to fix this (beside fixing img width, which isn't the point here) ?
html {
font-size: 16px;
font-family: "PT Sans", sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.app-banniere-utilisateur {
display: flex;
flex-direction: row;
height: 74px;
padding: 6px 10px;
max-width: 300px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar {
border: 3px solid #aaaaaa;
background-image: url(https://img-os-static.mihoyo.com/avatar/avatar22.png);
background-size: cover;
border-radius: 50%;
margin: auto 10px auto 0;
flex-shrink: 0;
width: 60px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar.online {
border-color: #54c242;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar:after {
content: "";
display: block;
padding-top: 100%;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
padding: 3px 0;
position: relative;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nom {
font-size: 20px;
font-weight: bold;
margin-bottom: auto;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav {
background-color: white;
bottom: -38px;
color: #2196f3;
display: flex;
flex-direction: row;
left: 0;
width: 100%;
position: absolute;
transition: bottom 150ms;
transition-timing-function: ease-in;
z-index: 1;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i {
font-size: 28px;
margin-right: 8px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i:last-child {
margin-right: 0;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand {
background-color: red;
flex-grow: 0;
flex-shrink: 0;
text-align: right;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand img {
max-height: 100%;
/* max-width is pushing parent width */
max-width: 80px;
}
.app-banniere-utilisateur:hover .app-banniere-utilisateur__info .app-banniere-utilisateur__info-nav {
bottom: 0;
transition: bottom 200ms;
transition-timing-function: ease-in-out;
}
.app-banniere-utilisateur {
border: 1px dashed;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js" defer></script>
</head>
<body>
<div class="app-banniere-utilisateur">
<div class="app-banniere-utilisateur__avatar online"></div>
<div class="app-banniere-utilisateur__info">
<div class="app-banniere-utilisateur__info-nom">FirstName LastName</div>
<div class="app-banniere-utilisateur__info-desc">Short user description</div>
<div class="app-banniere-utilisateur__info-nav">
<i class="material-icons">info</i>
<i class="material-icons">message</i>
<i class="material-icons">videocam</i>
</div>
</div>
<div class="app-banniere-utilisateur__stand">
<img src="https://i.pinimg.com/280x280_RS/35/7c/92/357c92d4bbd9b59bee2ef9d89d088f6d.jpg" alt="3D at Home">
</div>
</div>
</body>
</html>
I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.
The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.
I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.
I'm kind of stuck as to what to do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code
here`initial-scale=1.0">
<title>Jamaa</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right">Contact</li>
<li style="float:right">News</li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>
<section class="intro">
<div class="content">
<img src="images/jamaalogo.png"
style="height:300px; margin-top: 5%; align-content: center; "
class="center">
<h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency
access for those who need it most.</h2>
</div>
</section>
<div class="video_wrapper">
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; ">
<source src="images/fountain.mp4" type="video/mp4">
<div class="problem_box"><h2>We Have a Problem</h2><p>People are
losing their savings. Governments are collapsing. The threat of war is
looming on the horizon. All of these problems have a common source- bad
money. And yet most of us don't know what we can do about it.</p></div>
</video>
Here is the CSS:
#font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}
h2 {
font-size: 2em;
display: block;
color: white;
font-weight: 300;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1 em;
font-weight: 500;
color: white;
}
a {
font-weight: 700;
color: #333;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.container {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
padding: 2px 44px;
}
.navbar {
position: fix
}
#media screen and (max-width : 760px){
ul {
display: none;
}
.intro { background: red;}
.video_wrapper {
height:auto;
background: url("images/relief.jpg") no-repeat center center;
background-size: cover;
}
.video {
display: none;
}
}
.title {
display: block;
color: white;
align-items: center;
padding: 12px 44px;
font-size:;
}
li a:hover {
background-color: #4CAF50;
}
.intro {
height: 92vh;
background-color: #4CAF50;
display: block;
overflow: hidden;
}
.problem {
max-height: 60vh;
background-size: cover;
opacity: 0.8;
z-index: -100;
}
.problem_box {
height:70%;
z-index: 2;
}
.video_wrapper{
width: auto;
position: relative;
overflow: hidden;
z-index: -1;
margin-bottom: -30px;
text-align: center;
}
.video_wrapper video{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
height: auto;
overflow: auto;
}
.video_wrapper .problem_box {
height: auto;
width: 70%;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
background: #333;
opacity: 0.9;
display: inline-block;
margin-top: 8%;
margin-left: 15%;
box-sizing: content-box;
}
I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!
you forgot to put the video class on the video tag
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">
I wanted to make a parallax effect but I try lots of ways still can't do it. now I have half of the parallax effect which is the background image are fixed, without moving and the next image will cover the previous image, but now I want it to become when I scrolling down the background image will move down too but just slower than the original speed.
My code here
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: none;
margin-top:55px;
margin-left:65px;
}
.account
{
font-size: 25px;
font-family:"Times New Roman", Times, serif;
}
ul li
{
display: inline-block;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title
{
position: absolute;
top: 45%;
left: 34%;
}
.title h1
{
color:#fff;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
.title2
{
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2
{
color: black;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
</style>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
</body>
</html>
Here's a very simple example of a parallax effect using jQuery:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("img").css("top", "0" + (scroll / 1.8) + "px");
});
body {
margin: 0;
}
img {
position: absolute;
top: 0;
z-index: -1;
}
.block {
background: #ffffff;
position: relative;
margin-top: 100px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://placeimg.com/640/480/any">
<div class="block">Some text</div>
</div>
and here the same approach is specifically applied to your case:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("#header").css("background-position", "0%" + (scroll / -1.8) + "px");
});
html,
body {
height: 100%;
width: 100%
}
html {
}
body {
color: #fff;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
font-family: Century Gothic;
}
.top {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('https://placeimg.com/640/640/any');
height: 500px;
background-size: cover;
background-position: 0 0;
background-attachment: fixed;
}
.bottom {
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.main {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.main2 {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.nav {
float: left;
list-style-type: none;
margin-top: 55px;
margin-left: 65px;
}
.account {
font-size: 25px;
font-family: "Times New Roman", Times, serif;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover {
background-color: #fff;
color: #000;
}
ul li .active a {
background-color: #fff;
color: #000;
}
.logo img {
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title {
position: absolute;
top: 45%;
left: 34%;
}
.title h1 {
color: #fff;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
.title2 {
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2 {
color: black;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
Flexbox isn't working in Chrome or Safari but works fine in Firefox. The vertical images are expanding to not fit within their container, but in Firefox they're behaving as I want them to. Here is the code, any idea? Thanks.
body{ max-width: 1970px;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
padding-top: 100px;
}
a {
text-decoration: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
letter-spacing: -0.03em;
}
img {
max-width: 100%;
}
/***********************************
HEADING
************************************/
header {
float: left;
position:fixed;
top:0;
width: 100%;
z-index: 99;
background-color: white;
}
h1 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4.5em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
h2 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
line-height: 3em;
}
h3 {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-size:1.3em;
margin: 0 0 1em 0;
}
h4 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:2.5em;
font-weight: 700;
letter-spacing:0.0625em;
font-style: normal;
font-stretch: normal;
}
h5 {
font-family: 'Karla', sans-serif;
font-weight: 700;
font-size: 0.75em;
line-height: 1.2em;
}
p {
font-family: 'Karla', sans-serif;
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: -0.03em;
}
/***********************************
NAVIGATION
************************************/
nav {
/*text-align: center;
margin: 0 2%;
box-sizing: border-box;*/
background-color: white;
}
#nav-parent {
height:;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
.nav-icon {
flex-basis:auto;
}
#logo {
flex-basis:auto;
box-sizing: border-box;
padding-left: 20px;
}
.contact-button {
flex-basis:auto;
}
nav li a {
padding:0;
}
/***********************************
SIDE NAV
************************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #F3F3F3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
}
#sidenav-content {
margin-left: 13px;
}
.sidenav a {
text-decoration: none;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a h4 {
overflow: hidden;
white-space: nowrap;
padding: 16px 8px 0px 6px;
color: #000;
display: block;
transition: 0.1s;
}
.sidenav p {
padding: 0px 8px 8px 26px;
font-size: 16px;
color: #000;
display: block;
transition: 0.3s;
width: 250px;
}
.slide-nav-link {
margin-top: 10px;
padding: 8px 8px 8px 26px;
line-height: 2.2em;
}
.slide-nav-social {
width: 150px;
height:50px;
margin-top: 20px;
margin-left: 26px;
}
.slide-nav-social a {
width:20px;
padding: 0 15px 0 0;
display: inline-block;
}
.sidenav a:hover, .offcanvas a:focus{
color: #6B00FF;
}
.sidenav .closebtn {
padding: 15px 8px 8px 26px;
font-size: 30px;
margin-left: 0px;
}
.closebtn a:hover {
color: #000;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/***********************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width:20px;
height: 20px;
margin: 0 5px;
}
/***********************************
PAGE: PORTFOLIO
************************************/
.gallery{
margin: 0 auto;
list-style: none;
padding-left: 0;
}
.gallery figure {
overflow: hidden;
float: left;
width: 48%;
margin: 1%;
z-index: 97;
position: relative;
float: left;
}
.gallery figcaption {
background: rgba(255,255,255,0.97);
display : flex;
align-items : center;
text-align: center;
color: white;
float: left;
position: absolute;
left: 0;
opacity: 0;
right: 0;
top: 0;
height:100%;
z-index: 98;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.gallery figcaption h3 {
width:100%;
text-align: center;
color:#000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.gallery li:hover figcaption {
opacity: 1;
}
/***********************************
PAGE: Project
************************************/
.project-gallery{
margin: 0 auto;
padding: 0 1.5%;
list-style: none;
}
.project-gallery img{
max-width: 100%;
margin: 1.5% 0;
}
.project-gallery hr {
margin: 40px 0;
border: none;
height: 3px;
background-color: #000;
}
.project-title {
max-width: 100%;
text-align: center;
padding-top: 40px;
}
.description-text {
display:inline;
}
.left-column-text {
width:30%;
margin-left: 5%;
margin-top: 8px;
display:inline-block;
vertical-align: top;
}
.left-column-text p {
margin: 10px 0 25px 0;
}
.left-column-text h5 {
margin-bottom: -5px;
}
.right-column-text {
width:50%;
margin: 0 5% 0 8%;
display:inline-block;
vertical-align: top;
}
.vertical-imgs {
display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display:flex;
justify-content: space-between;
margin: 1% 0;
}
.vertical-img-left {
box-sizing: border-box;
padding-right: 3%;
}
.vertical-img-right {
box-sizing: border-box;
}
.prev-next-buttons {
margin-right: -3.7%;
}
.prev-next-buttons a {
display: inline-block;
margin: 0;
box-sizing: border-box;
padding: 20px 5%;
}
.prev-button {
width:48%;
}
.next-button {
text-align: right;
width:48%;
}
/***********************************
PAGE: About
************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE: CONTACT
************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#000;
}
/*green header
header {
background: #6ab47b;
border-color: #599a68;
}*/
/*nav background on mobile
nav {
background: #599a68;
}*/
/*logo text */
h1 {
color: #000;
}
/*link color*/
a {
color:#000
}
/*nav link colors*/
nav a, nav a:visited {
color: #000;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #5513FE
}
/* selected prev next link colors*/
a h1.selected, a h1:hover {
color: #5513FE
}
a h4.selected, a h4:hover {
color: #5513FE
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cari Sekendur - MHG Modern Classic</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="fonts/1606-HQIULX.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul id="nav-parent">
<li class="nav-icon">
<span style="cursor:pointer" onclick="openNav()"
</span>
<img src="img/nav-icon.svg" class="nav-icon">
</li>
<li id="nav-icon">
<a href="index.html" id="logo">
<h1>CARI</h1>
</a>
</li>
<li class="nav-icon">
Contact
</li>
</ul>
</nav>
</header>
<div id="mySidenav" class="sidenav">
<div id="sidenav-content">
<img src="img/nav-icon-open.svg" class="nav-icon">
<div class= "slide-nav-link">
Work
About
Contact
</div>
<div class= "slide-nav-text">
<a href="index.html" id="logo">
<h4>CARI SEKENDUR</h4>
</a>
<p>Creating visual experiences that make the complex clear and the average exceptional.</p>
</div>
<div class= "slide-nav-social">
<img src="img/WNWlogo.svg">
<img src="img/linkedin-black.svg">
<img src="img/pinterest-black.svg">
</div>
</div>
</div>
<!--Click on the element below to open the side navigation menu.-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="wrapper">
<section class="project-gallery">
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_1.gif" alt="">
</div>
<div class="project-title">
<h2>MORGANS HOTEL GROUP - MODERN CLASSIC ZINE</h2>
</div>
<hr>
<div class="description-text">
<div class="left-column-text">
<h5>STUDIO</h5>
<p>LMNOP Creative</p>
<h5>CREATIVE DIRECTION</h5>
<p>Leigh Nelson</p>
<h5>DESIGN</h5>
<p>Cari Sekendur, Leigh Nelson, Heidi Chisholm</p>
</div>
<div class="right-column-text">
<p> Morgans Hotel Group launched the global phenomenon of boutique hotels 20 years ago, and to celebrate their rich history they put together a campaign called The Modern Classic. Each of Morgans' properties has a design aesthetic that is unlike anything you've seen before, awe-inspiring and always over-the-top. So, to capture the essence of Morgans' brand, we concepted, designed, and printed a zine for them to distribute to hotel guests. This project was a print designer's dream, complete with gold-holographic foil, gold staples, fluorescent Pantone inks, collage, illustration, a tear-out poster, and even a little pack of temporary tattoos.
</p>
</div>
<hr>
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_2.jpg" alt="">
</div>
<div class="vertical-imgs">
<img src="img/mhg-zine/CARI_MHG_ZINE_8.jpg" alt="" class="vertical-img-left">
<img src="img/mhg-zine/CARI_MHG_ZINE_5.jpg" alt="" class="vertical-img-right">
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_7.jpg" alt="">
</div>
<div class="prev-next-buttons">
<a href="#" class="prev-button">
<h2>PREVIOUS</h2>
</a>
<a href="#" class="next-button">
<h2>NEXT</h2>
</a>
</div>
<hr class="bottom-hr" style="margin-top: 0px;">
</section>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
use :
#nav-parent {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: initial;
flex-flow: initial;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
I'm trying to make css drop-down menu responsive according to the browser window.
I want the menu text to stay centered according to the browser window
Please see this video as examples of the intended behavior:
https://youtu.be/ZPWforRw_cc?t=34m23s
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
.box1 {
height: 30px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 30px;
width: 300px;
background: #b14242;
}
.box3 {
height: 30px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: ease-in-out 0.3s;
position:relative;
top: -260px;
z-index: 0; }
.toggle {
transition: ease-in-out 0.3s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -120px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.sidebar {
display:flex;
justify-content: center;
align-items: center;
transition: ease-in-out 0.3s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.sidebar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-family: 'Lato', sans-serif;
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.sidebar li:hover {
color: rgba(255, 255, 255,1); }
#sidebartoggler {
display: none; }
#sidebartoggler:checked + .page-wrap .sidebar {
top: 0px; }
#sidebartoggler:checked + .page-wrap .toggle {
top: 100px; }
#sidebartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="sidebartoggler" class="toggle">☰</label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
this will work,
.page-wrap{
width:1216px;
}
+ use Media Queries as follows:
#media only screen and (max-width: 1216px) {
.page-wrap{
width: 100%;}
}