I have created the following HTML for use in sending emails. I was wondering how I would get this to work so that style rules for the images were followed along with the rules for the grey background in the header and footer.
p {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
p {
font-family: 'Roboto', serif;
font-size: 6vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
.headerandfooter {
background-color: #5c5c5c;
width: 100%;
}
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.headerlogo {
max-width: 40%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.headerlogo {
max-width: 60%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
</style>
<style>
.icons {
width: 10%;
max-width: 10%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 500px) {
.icons {
width: 30%;
max-width: 30%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
}
.col-container {
display: table;
float: left;
width: 100%;
padding: 1vh;
background-color: #5c5c5c;
}
.column {
float: left;
width: 50%;
}
h1 {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
h6 {
font-family: 'Roboto', serif;
font-size: 1vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h6 {
font-family: 'Roboto', serif;
font-size: 3vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
</style>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Style Will Be Linked" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>
<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>
<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1">
</div>
<div class="column">
<img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2">
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>
If you run it, the code does work on web but doesn't correctly render in email, the images do display but none of the CSS does.
Thanks in advance :)
Many email client's such as (Outlook, Yahoo, Gmail) will stripe away styles unless inline. Styles must be inline for email templates to render properly.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<style type="text/css">
p {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
p {
font-family: 'Roboto', serif;
font-size: 6vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
.headerandfooter {
background-color: #5c5c5c;
width: 100%;
}
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.headerlogo {
max-width: 40%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.headerlogo {
max-width: 60%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
</style>
.icons {
width: 10%;
max-width: 10%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 500px) {
.icons {
width: 30%;
max-width: 30%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
}
.col-container {
display: table;
float: left;
width: 100%;
padding: 1vh;
background-color: #5c5c5c;
}
.column {
float: left;
width: 50%;
}
h1 {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
h6 {
font-family: 'Roboto', serif;
font-size: 1vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h6 {
font-family: 'Roboto', serif;
font-size: 3vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
</style>
<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>
<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>
<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1">
</div>
<div class="column">
<img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2">
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>
</body>enter code here
Emails doesn't support regular CSS inside style tag and you cannot use few things like negative margins, absolute positions and few other stuff, they won't work in an email client. That is the reason, many people still use standard tables in emailers. you can use all the elements, but better have the styling inline to every particular element. Only system fonts are supported. Roboto would be available only on Android phones in case you choose to use it. all other devices default to serif. And Media queries won't work in emailers. You gotta use some hacks with sizes and floats to achieve what some people call responsive emailers. Emailer services Gmail/yahoo mail and clients outlook/apple mail etcetera will strip away all the external CSS which is not inline. And each of them may render things differently. when you try to email testing service with this code, all they do is strip the CSS and add it inline to your HTML.
Related
I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.
when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.
So I want to make a quiz game and now I want to make it a little responsive. I made desktop first and now I am making it for pc. I try to use the media query but it seems like it does not work at all. What am I missing?
I tried with a class instead of body but it stil does not work at all.
I excluded the js because it was unnecesary
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body {
font-size: 12px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question {
font-size: 3em;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
}
.answers label {
display: block;
margin-bottom: 10px;
}
input[type=radio] {
height: 2em;
width: 2em;
}
button {
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#media (max-width: 600px) {
body {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
</head>
<body>
<div class="container">
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<div id="results"></div>
</div>
<script src="QuizLogic.js"></script>
</body>
</html>
I have tried with your code here in JS Fiddle.
It looks you made small mistake in #media query
#media only screen and (max-width: 768px) {
body {
background-color: red;
}
}
Hope this will be helpful.
Please go through with W3 schools
When working with width-oriented media queries, It is best to start mobile-first. This means the first portion of your CSS should be styles that are standard for your website and need no media queries at all to work at mobile-width.
Then you would add a media-query starting at a given width using min-width, thus:
#media (min-width: 720px) {
body { background: red;}
}
Your media queries have a hole where no declaration covers, but if you need a middle area the syntax looks like this:
#media screen and (min-width: 768px) and (max-width: 880px) {
body { background: pink;}
}
I hope that helps.
Your code is okey
Test with something clear visible. I've using background color, & it's working
Use it for more readable-
...
...
The width=device-width key-value pair sets the width of the viewport to the width of the device.
The initial-scale=1 key-value pair sets the initial zoom level when visiting the page.
Always keep the small scope or range in down for media query screen size.
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body {
font-size: 12px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question {
font-size: 3em;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
}
.answers label {
display: block;
margin-bottom: 10px;
}
input[type=radio] {
height: 2em;
width: 2em;
}
button {
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#media (max-width: 1200px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: yellow;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="QuizTransition.css" type="text/css">
</head>
<body>
<div class="container">
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<div id="results"></div>
</div>
<script src="QuizLogic.js"></script>
</body>
</html>
I'm currently working with a really basic header (I eventually want it to animate when opening and collapsing and have the hamburger menu animate to/from the close icon). The header is responsive and the user can collapse it when tapping the close icon. How can I make it collapse whenever somewhere other than the header is tapped:
Here's what I'm working with so far.
body,
html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
#media only screen and (max-width: 500px) {
.logo-container {
float: left;
width: 80%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
}
#media only screen and (max-width: 500px) {
.navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
}
.logo {
height: 8vh;
max-width: 40%;
padding-top: 1.5vh;
padding-bottom: 0.5vh;
padding-left: 4vh;
display: block;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.logo {
height: 8vh;
max-width: 80%;
padding-top: 1.5vh;
padding-bottom: 0.5vh;
padding-left: 2vh;
display: block;
object-fit: contain;
}
}
img {
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
nav {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right: auto;
text-align: right;
}
nav a {
display: block;
}
i {
display: none !important;
}
#media (max-width: 500px) {
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
}
nav.active {
display: block;
background-color: aqua;
border-top: solid;
border-bottom: green solid 0.2vh;
padding: 1vh;
padding-bottom: 2vh;
}
i {
display: block!important;
margin: 5px;
}
}
.fa {
font-size: 6vh;
padding-top: 2vh;
padding-bottom: 2vh;
padding: 0vh;
}
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<a href="#">
<p class="nav">Page1</p>
</a>
<a href="#">
<p class="nav">Page2</p>
</a>
<a href="#">
<p class="nav">Page3</p>
</a>
<a href="#">
<p class="nav">Page4</p>
</a>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>
<script>
menu = document.querySelector('nav');
document.querySelector('i')
.addEventListener('click', e => {
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
})
</script>
<div class="header-fill">
</div>
There's quite a lot. I'd just like it so if the user decides to tap somewhere else they don't have to click the close button in case they decide to stick with that page.
Bonus if someone can figure out how to add bootstrap for expansion and collapse of the header (in mobile view) and to animate the close/hamburger menu.
Quite stuck,
Thanks in advance.
try this
$(document).click(function() {
$("nav").removeClass("active")
})
$("nav").click(function(e) {
e.stopPropagation()
return false
})
$(".fa.fa-bars").click(function(e) {
e.stopPropagation()
$("nav").toggleClass("active")
})
This should solve you problem let me know the outcome
let button =document.querySelector('body').addEventListener('click', buttonClick);
function buttonClick(e)
{
//to view current target on console
console.log(e.target);
//checks if you've clicked out side the nav
if(!e.target.classList.contains('navigation-container'))
{
//checks if nav is open
if(document.querySelector('nav').classList.contains('active'))
{
console.log('now closing nav');
//from your code this should close the nav but adjust to close the nav if this dose not work
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
}
}
}
I've currently got a website header that functions fine on a desktop. I had initially planned to stack the content so that the pages would then display under the logo. I have seen hamburger menus used for a drop-down which is what I'd ultimately like to achieve, retaining the logo on the left.
I know this will likely take time but I think I'm almost there. I just think it'd be easier to have the same elements be responsive rather than creating two separate headers and toggling visibility.
So currently I have this:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
.mobile-header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.mobile-logo-container {
float: left;
width: 60%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.mobile-navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.mobile-logo {
height:8vh;
max-width: 60vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:2vh;
display: block;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.header-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.navigation-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo {
visibility: hidden;
}
}
#media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-header-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-navigation-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo {
visibility: hidden;
}
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="headerfill">
</div>
This looks fine, and is suitable for desktop use. I just need them to be responsive in a way when on mobile the elements adjust.
The icons don't have to switch and I know that can be done with event listeners if needed. Just not sure how to have the original elements format differently on mobile devices without creating two separate headers.
Hopefully the image gives a good enough idea of what I'm aiming for. First time I've tried to attempt this sort of drop-down navigation so thanks in advance :)
UPDATE
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet3.1.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
Hope this helps. I need to find a way to incorporate that design (using the code I already have) with the answer from #Nyan. I've removed the media queries and the separate mobile and desktop headers. Can't figure this out.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
Page1
Page2
Page3
Page4
</nav>
</header>
It'd run like that, with that structure but retain the initial design. (image above)
You can create just button, which is hidden on big screens and visible on small, and listen click event on it. Or if you don't want to create new elements at all, you can use ::after and ::before, and listen them.
Listener can, for example, toggle class active on list.
List itself can be absolutely positioned to bottom of header, and hidden when doesn't have active class.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
one
two
three
four
</nav>
</header>
Which one of this steps cause you more questions?
I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.