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?
Related
Since products were not responsive against resizing the browser like this:
I wanted to make my grid responsive so i added grid area like this:
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
but now footer is smaller and i have just one product instead of what should be in the body:
what is wrong with adding grid area in this code?
or if there is a better way to make them responsive what is it?
also this is the overall view of the site:
.header{
color: saddlebrown;
width: 100%;
height: 100px;
position: fixed;
background-color: burlywood;
opacity: 33px;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 1000;
grid-area: head;
}
body{
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer{
color: white;
background: sandybrown;
margin-top: 100px;
height: 100px;
margin-right: 0;
width: 100%;
grid-area: foot;
}
.card {
max-width: 400px;
margin: auto ;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
grid-area: card ;
}
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media screen and (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}
}
#media screen and (max-width: 1319px){
.grid{
grid-template-columns:1fr 1fr 1fr ;
}
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<div class="header">
<h1 >header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
</div>
<div class="footer">
<h1 >© All rights reserved</h1>
</div>
</body>
</html>
You want to set grid-area with head and foot which are outside of grid itself.
My propose is to remove grid-area from grid, and just use grid-template with media queries, or simply you can add display flex with flex-wrap.
I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.
I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>
Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
You need to add this to your button selector:
.button {
transform: translateX(-50%);
}
On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.
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 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.