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%;}
}
Related
I have two big problems:
The first trouble I have encountered is that when I am testing the responsivity of my website in the contact section I always meet a reappearing problem: There is a white space (.2 rem - 1.2rem width) on the right side of the body when I try to display the whole page under 400px width device.
My second problem is that I have social media icons in the footer. They appear properly in all other sections (multipage website), but only here does something prevent them to be displayed properly. I tried resizing their main divs to 100% width and 100% max-width, but an element is probably still longer than the others, which should obviously cause this kind of problem.
So about the white blank area, I think it is important to know that I have a specially styled scrollbar, which might also cause this little mischief. I am unsure, so I have also tried removing it, but it did not help. In the beginning, I also encountered the same problem with the footer, but somehow I managed to get by and was able to solve it by correcting the width of the .footer-container. Since then the white space appeared and my second problem with social media icons not being displayed properly just arose.
Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="contacts.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<!--NAVBAR-->
<nav>
<ul class="menu" id="desktop-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
</div>
</header>
<main>
<!--CONTACT FORM-->
<div class="container">
<form>
<h1>Kapcsolat</h1>
<input type="text" id="firstName" placeholder="Családnév" required>
<input type="text" id="lastName" placeholder="Keresztnév" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="mobile" placeholder="Telefonszám" required>
<h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
<textarea id="texti" required></textarea>
<input type="submit" value="Elküldés" id="button">
</form>
</div>
</main>
<footer>
<div class="footer-container">
<!--COMPANY INFORMATION, CONTATCTS-->
<div class="footer-top">
<div>
<article>
<h2>Elérhetőségeink</h2>
<div class="cellphone">
<img src="assets/png/telephone.png" alt="phone-icon">
<h3><span>Telefonszám:</span> +36709424298</h3>
</div>
<div class="internet">
<img src="assets/png/mail.png" alt="email-icon">
<h3><span>E-mail:</span> eckertmuvek#gmail.com</h3>
</div>
<div class="headquarter">
<img src="assets/png/location.png" alt="company-icon">
<h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
</div>
<div class="opening-hours">
<img src="assets/png/clock.png" alt="op-icon">
<h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
</div>
</article>
</div>
<!--TEXT-->
<div class="text-container">
<h4>Céginformációk</h4>
<p>
<ol>
<li>
<h5>Cégjegyzékszám: </h5>
<p> 01 09 996342</p>
</li>
<li>
<h5>Adószám: </h5>
<p>24222716243</p>
</li>
<li>
<h5>Számlaszám: </h5>
<p>112131423-43242142-432412421</p>
</li>
<li>
<h5>Cégnév: </h5>
<p>Eckert Művek Korlátolt Felelősségű Társaság</p>
</li>
</ol>
</p>
</div>
<!--
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
-->
<!--POLICIES-->
<div class="policies">
Impresszum
GDPR Tájékoztató
Süti Tájékoztató
</div>
</div>
<!--MAP-->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!--SOCIAL MEDIA ICONS-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="contacts.js"></script>
</body>
</html>
And here is my CSS code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--nav-height: 100px; /*80%*/
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
width: 100%;
font-size: 12px;
font-family: sans-serif;
}
.floating-btn {
position: fixed;
bottom: 3.5vh;
right: 0;
width: 50px;
height: 50px;
z-index: 100;
background-color: yellow;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
cursor: pointer;
margin-right: 1rem;
border: 1px solid #000;
}
.show-btn {
display: block;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
background-color: #000;
}
/*Srcollbar*/
::-webkit-scrollbar{
width: 15px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: yellow;
border-radius: 10px;
border: 1px solid black;
}
::-webkit-scrollbar-thumb:active {
background: orangered;
}
nav {
display: flex;
width: min(90%, 1200px);
height: inherit;
align-items: center;
justify-content: flex-start;
margin-inline: unset;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
left: 2.5rem;
gap: 1rem;
/*margin-top: -2.5rem;*/
}
nav a {
max-height: var(--nav-height);
align-items: center;
margin-inline: auto;
font-size: 20px;
position: relative;
height: 100%;
}
nav ul {
display: flex;
gap: 1rem;
width: 100%;
list-style: none;
margin-top: 3rem;
}
.nav-item a {
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
height: 100%;
margin: .5em .8em;
padding: 10px;
}
.nav-item a::before,
.nav-item a::after {
content: '';
height: 14px;
width: 14px;
position: absolute;
transition: all .35s ease;
opacity: 0;
}
nav a::before {
content: '';
right: 0;
top: 0;
border-top: 3px solid #ffed4b;
border-right: 3px solid #fdcd3b;
transform: translate(-100%, 50%); /*-100%, 50%*/
}
.nav-item a:after {
content: '';
left: 0;
bottom: 0;
border-bottom: 3px solid #fdcd3b;
border-left: 3px solid #ffed4b;
transform: translate(100%, -50%); /*100%, -50%*/
}
.nav-item a:hover:before,
.nav-item a:hover:after{
transform: translate(0,0);
opacity: 1;
}
.nav-item a:hover {
text-decoration: underline;
color:yellow;
}
.container{
min-height: 100vh;
width: 99.vw;
background: #08071d;
display: flex;
justify-content: center;
align-items: center;
background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
}
.container form{
width: 670px; /*670px*/
height: 450px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
overflow-x: hidden;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 25px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 25px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
.contactus {
font-size: 18px;
}
input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
border-bottom: 3px solid #fdcd3b;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: 1px solid;
background: transparent;
border-radius: 50px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #fff;
width: 100px;
padding: 0;
margin-right: 500px;
margin-bottom: 30px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.9;
transform: scale(1.2);
background-color: black;
color: yellow;
}
/*FOOTER*/
footer {
width: 100%;
background-color: #000;
padding-block: 4rem;
color: white;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-inline: auto;
width: min(90%, 1200px);
}
.footer-top {
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
display: flex;
justify-content: space-around;
}
.footer-top h2 {
text-align: center;
justify-content: center;
align-items: center;
}
.footer-top article div {
line-height: 2.5rem;
}
.footer-top article div:first-of-type {
margin-top: 1rem;
}
.footer-top img {
height: 64px;
}
.text-container p {
margin-top: 2rem;
}
.text-container ol li {
line-height: 1.5rem;
}
/*CONTACT ICONS*/
.cellphone img, .internet img, .headquarter img, .opening-hours img{
background-color: yellow;
border-radius: 50px;
transition: all 0.3s linear;
}
footer img:hover {
background-color: orangered;
border-radius: 40px;
transform: rotate(-360deg);
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
}
span {
color: yellow;
}
.text-container {
justify-content: space-between;
width: 20vw;;
font-size: 0.8rem;
}
/*POLICIES LINKS*/
.policies {
display: flex;
flex-direction: column;
font-size: 14px;
text-transform: uppercase;
}
.policies a {
color: yellow;
font-size: 10px;
line-height: 2rem;
}
.policies a:hover {
color: orangered;
}
/*MAP*/
.map {
margin-inline: auto;
}
/*SOCIAL MEDIA ICONS*/
.social-media-icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sm-container {
display: flex;
justify-content: center;
gap: 2rem;
padding:1rem;
border: 1px black;
width: 100%;
height: 100%;
}
.sm-container a:active {
color: yellow;
}
.fa {
border-radius: 50%;
width: 100%;
height: 100%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
/**/
}
.fa-instagram {
background: #125688;
color: white;
padding: 1rem;
}
.fa-github {
background: white;
color: black;
padding: 1rem;
}
.fa-facebook {
background: #4267B2;
color: white;
padding: 1rem;
}
.fa-linkedin {
background: #3B5998;
color: white;
padding: 1rem;
}
.sm-icon {
transition: all 0.3s linear;
}
.sm-icon:hover {
transform: scale(1.2);
}
.fa:hover {
background-color: #fdcd3b;
}
/*MOBILE MENU*/
.mobile-menu {
display: none;
}
.mobile-menu {
display: flex;
width: 100%; /*.line a szülő tehát 40px a width*/
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
position: absolute;
top: 80px;
left: 0;
background-color: black;
transform: translate(-100%);
transition: all 0.4s ease;
z-index: 100;
}
.mobile-menu-on {
display: flex; /**/
transform: translate(0);
}
.m-menu {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
font-size: 1.4rem;
}
/*hamburger icon*/
.header-right-gap {
width: 100px;
margin-left: 2rem;
}
.hamburger {
display: none;
position: fixed;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
top: 0;
left: 1;
margin-top: 1.5rem;
}
.hamburger:hover {
border: 6px solid;
border-color: yellow;
width: 43px;
margin-left: 4px;
transform: scale(1.2);
}
.hamburger:hover .line.line-1 {
/*display: none;*/
transform: rotate(45deg) translateY(7.5px);
background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/*Media query*/
#media (max-width: 1200px) {
.hamburger {
display: block;
}
#desktop-menu {
display: none;
}
}
#media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a {
font-size: 15px;
/*padding: 15px;*/
}
}
#media (max-width: 750px) {
.footer-container {
display: flex;
flex-wrap: wrap;
}
footer nav ul li a {
font-size: 10px;
padding: 15px;
}
.text-container p {
font-size: 10px;
}
}
#media (max-width: 600px) {
.container form {
width: 470px;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
min-width: 300px;
max-width: 300px;
}
}
#media (max-width: 400px) {
.container {
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container form {
max-width: 100%;
padding-top: 40px;
padding-bottom: 10px;
}
.container form input, h4 {
text-align: center;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
align-items: center;
min-width: 300px;
max-width: 300px;
}
.text-container {
width: 70vw;
}
.container form #button {
display: flex;
flex-direction: column;
}
footer {
width: 400px;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
}
I once had a similar problem and it was due to margin of one element being bigger than it should be, and it just made that div bigger and pushed it out of viewport, so you could check your margins, I can see that you have quite a lot of margins, inline and to margin-right as well.
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>
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
I have a drop-down menu on a site that I have been working on I and I need to get rid of this gap above the drop-down menu. It is quite bothersome.
Figure A
So, in an attempt to fix it, I changed the li line-height from 50px to 47px and got this:
Figure B
Almost what I want, but not quite. The problem? The li is higher causing the little animation I have under the li to no longer touch the image.
Then, I tried giving the li a relative position. But now, the drop-down is the same width as the 'Patient Info' link.
Figure C
Here is my jsfiddle link if you would like to fiddle around with it. There is no rush. Thank you!
Code:
body {
font-family: 'Source Sans Pro', sans-serif;
max-width: 2500px;
margin: 0 auto 30px auto;
}
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img#profile {
width: 100%;
max-width: 64px;
border-radius: 100%;
}
.header,
.menu,
.hero,
.slider,
.img-display {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #11b5e4;
color: white;
}
::-moz-selection {
background: #11b5e4;
color: white;
}
/* HEADER & MENU STYLE START */
.header {
height: 100px;
padding: 15px 10px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
margin: 0px 25px 0px 25px;
}
.header img {
height: 100%;
pointer-events: none;
}
.header a i {
font-size: 30px;
margin: 0px 0px 0px 15px;
color: black;
transition: .15s color;
}
.header a i:hover {
color: #11b5e4;
}
.menu-wrapper {
height: 50px;
display: flex;
justify-content: center;
}
.menu li {
display: inline-block;
line-height: 50px;
}
.menu li a {
display: inline-block;
font-size: 23px;
margin: 0px 10px;
transition: .2s cubic-bezier(.5, 3, .5, .5) background;
color: black;
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 0px no-repeat;
text-decoration: none;
}
.menu li a:hover {
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 5px no-repeat;
}
.menu-wrapper #toggle-menu {
display: none;
}
/* FOR STACK OVERFLOW */
.menu li ul {
margin: 0;
padding: 0;
display: none;
background: white;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: flex;
flex-direction: column;
position: absolute;
}
/* END OF FOR STACK OVERFLOW */
#media only screen and (max-width: 1000px) {
.menu {
opacity: 0;
position: relative;
top: 50px;
transition: .25s opacity;
pointer-events: none;
}
.menu-wrapper #toggle-menu:checked~.menu {
opacity: 1;
pointer-events: all;
}
.menu li {
display: block;
text-align: center;
background-color: white;
padding: 0px 15px;
}
.menu-wrapper label {
align-self: center;
width: 32px;
height: 32px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.menu-wrapper label:hover {
cursor: pointer;
}
.menu-wrapper label#open-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-open-icon.png) center center/cover no-repeat;
}
.menu-wrapper label#close-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-close-icon.png) center center/cover no-repeat;
opacity: 0;
}
.menu-wrapper #toggle-menu:checked~label#open-menu {
opacity: 0;
transform: rotate(360deg);
}
.menu-wrapper #toggle-menu:checked~label#close-menu {
opacity: 1;
transform: rotate(360deg);
}
}
#media only screen and (max-width: 750px) {
.header {
height: 75px;
}
.header h1 {
margin: 0px 5px;
font-size: 20px;
}
.header a i {
font-size: 20px;
margin: 0px 0px 0px 5px;
}
}
/* HEADER & MENU STYLE END */
/* HERO START */
.hero {
display: flex;
justify-content: center;
height: calc(150px + 20vw);
width: 100%;
}
.hero h1 {
text-align: center;
font-size: 35px;
padding: 8px;
margin: 15px;
background: rgba(17, 181, 228, .75);
border-radius: 10px;
color: white;
font-weight: bolder;
}
.hero.a {
align-items: flex-end;
background: url(http://ianspence.us/stack/hero.a.jpg) center/cover no-repeat;
}
.hero.b {
align-items: flex-end;
background: url(media/hero.b.jpeg) center/cover no-repeat;
}
#media only screen and (max-width: 900px) {
.hero.a,
.hero.b {
height: 300px;
}
.hero.a h1,
.hero.b h1 {
font-size: 26px;
}
}
#media only screen and (max-width: 400px) {
.hero.a,
.hero.b {
height: 250px;
}
.hero.a h1,
.hero.b h1 {
font-size: 16px;
}
}
/* HERO END */
<!DOCTYPE html>
<html>
<head>
<title>#pfcainc | Home</title>
<link rel='shortcut icon' href='http://ianspence.us/stack/icon.png'>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='media/fontawesome/css/fontawesome-all.css'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='3 days'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='header'>
<img src='http://ianspence.us/stack/icon.png'>
<h1>Panhandle Family Care Associates</h1>
<a href='https://facebook.com/panhandlefamilycareassociates/'><i class='fab fa-facebook-square'></i></a>
<a href='https://twitter.com/pfcainc'><i class='fab fa-twitter'></i></a>
</div>
<div class='menu-wrapper'>
<input type='checkbox' id='toggle-menu'>
<label for='toggle-menu' id='open-menu'></label>
<label for='toggle-menu' id='close-menu'></label>
<!--Start Menu Display-->
<div class='menu'>
<li><a href='=./'>Home</a></li>
<li><a href='services'>Services</a></li>
<li><a href='physicians'>Physicians</a></li>
<li>Patient Info
<ul>
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
</li>
<li><a href='office-info'>Office Info</a></li>
</div>
<!--End Menu Display-->
</div>
<div class='hero a'>
<h1>Treating your family like ours since 2002</h1>
</div>
</body>
</html>
Notes:
In jsfiddle, make sure you increase the width of the preview so that the
full menu is there, not the hamburger menu.
I am trying to avoid Javascript completely.
margin-top: -3px for submenu seems to fix the issue across all (major) browsers, however I'd recommend fix from my Codepen, with flex and defined height for li elements.
Fast & simple
HTML:
<ul class="submenu">
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
CSS:
.submenu {
margin-top: -3px !important;
}
More clean approach
Codepen
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;
}