I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
There is a code snippet: https://codepen.io/danamaria5/pen/gOPZRPa .
Here the "container" class selector in css should select both sections "home-hero" & "home-about". As you can see in the snippet the colors apply just to the home-hero although the background of the home-about becomes coral in the pc media query. I can't figure out why is still black in the mobile format.
And the font-weight is applied just to the home-about. In home-hero, font weight property should be applied just to the bolder top part of the title as the lower one is selected with the .title span which is more specific than the .container. However, this is not the case because the "Making things looks great" text is still bold instead of font-weight: 100; from the container which is selected at the end of the style sheet so nothing else overrides it. Could someone, please explain?
Related
I seem to be having a weird problem when using border-radius and overflow: hidden together, please see the picture for my problem.
As you can see in the bottom right the image doesn't expand to the very edge of the div and a little curve is visible, any help will be much appreciated.
I also have a live version here, problem can be seen near the bottom of the page: http://hasky.infinityfreeapp.com/
Image
.content__card {
position: relative;
margin: 1em 0;
width: 80em;
max-width: 80%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
border: none;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
height: auto;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7D44FD;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>
I'm not sure what your problem is exactly, but this is the solution I can provide depending on what I understood.
added the basic styling and also remove some unnecessary code.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #000;
}
.content__card {
position: relative;
margin: 1em 0;
max-width: 90%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
width: 20rem;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7d44fd;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>
How can i make Netflix like Collapsable QNA sectionImage 1 click here
image 2
You don't need JS for this task
body {
margin: 0;
background-color: #000;
font-family: sans-serif;
}
.faq_block {
margin: 30px 0 85px
}
.faq_item {
border-radius: 20px;
padding: 0;
margin-bottom: 10px
}
.faq_item:focus .faq_question,
.faq_item:hover .faq_question {
color: #d5f867
}
.faq_item:focus .faq_question:after,
.faq_item:focus .faq_question:before,
.faq_item:hover .faq_question:after,
.faq_item:hover .faq_question:before {
background: #d5f867
}
.faq_item:before {
display: none
}
.faq_question {
font-weight: 700;
position: relative;
display: block;
font-size: 16px;
color: #fff;
border-radius: 20px;
cursor: pointer
}
.faq_question:after,
.faq_question:before {
content: "";
position: absolute;
background-color: #fff;
z-index: 2
}
.faq_question:after {
right: 17px;
top: 24px;
width: 14px;
height: 2px
}
.faq_question:before {
height: 14px;
width: 2px;
right: 23px;
top: 18px
}
.faq_item[open] .faq_question {
background: #d5f867;
color: #000
}
.bl_ceo .faq_answer ul li:before,
.faq_item[open] .faq_question:after {
background-color: #000
}
.faq_item[open] .faq_question:before {
opacity: 0
}
.faq_item[open] {
background-color: #fff
}
.faq_answer,
.faq_question {
padding: 16px 24px
}
.faq_item[open] .faq_answer,
.faq_item[open] .faq_answer li,
.faq_item[open] .faq_answer p {
color: #000
}
<div class="faq_block">
<details class="faq_item" open="">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
<details class="faq_item">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
</div>
My site design is very close to finish, but I'm stuck on getting this font to install and work on my site. Do .woff files only show on the web once it connects to a server or what? I'm completely confused? I don't know what I'm doing wrong, I'm following the guide they gave me verbatim.
In my code you can see how I added the code source in my html and tried to add it to my nav.logo file.
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-
ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2")
format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2")
format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push(""); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
</head>
Here's an example of how I'm applying the font in css
/* IMPORTS */
/*DADD HOME*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.4s;
}
body {
background-color: white;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
min-height: 100vh;
}
.li {
font-family: 'Michroma', sans-serif;
}
.container {
margin-left: 0%;
margin-right: 1%;
}
/* Navbar section */
.nav div.main_list ul li{
height: 65px;
margin: auto 2rem; /* That will define a equal space between the <li> elements */
}
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
background-color: rgba(0, 0, 0, 0.8);
}
div.logo {
width: 120px;
height: 65px;
position: absolute;
text-align: right;
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
div.logo a {
text-decoration: none;
color: #fff;
font-size: 1.8em;
color: white;
}
.nav div.logo a:hover {
color: #c0c0c0;
}
div.main_list {
width: 600px;
height: 65px;
float: right;
font-size: 14px;
font-family: Michroma;
src: url(Michroma.ttf), url(san-serif.ttf);
text-transform: uppercase;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
justify-content: space-around;
}
.nav div.main_list ul li {
height: 65px;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
text-transform: uppercase;
}
.nav div.main_list ul li a:hover {
color: #c0c0c0;
}
.nav div.media_button {
width: 40px;
height: 40px;
background-color: transparent;
position: absolute;
right: 15px;
top: 12px;
display: none;
}
.nav div.media_button button.main_media_button {
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
border: none;
cursor: pointer;
}
.nav div.media_button button.main_media_button span {
width: 98%;
height: 1px;
display: block;
background-color: #fff;
margin-top: 9px;
margin-bottom: 10px;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(1) {
transform: rotateY(180deg);
transition: all 0.5s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(2) {
transform: rotateY(180deg);
transition: all 0.4s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(3) {
transform: rotateY(180deg);
transition: all 0.3s;
background-color: #c0c0c0;
}
.nav div.media_button button.active span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active span:nth-of-type(2) {
display: none;
}
.nav div.media_button button.active span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active:hover span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 20deg);
}
.nav div.media_button button.active:hover span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -20deg);
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-color: #ddd;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.container {
margin: 0;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
margin-top: 65px;
height: 0px;
overflow: hidden;
}
.nav div.show_list {
height: 200px;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 200px;
top: 80px;
right: 0;
left: 0;
}
.nav div.main_list ul li {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.8);
}
.nav div.main_list ul li a {
text-align: center;
line-height: 40px;
width: 100%;
height: 40px;
display: table;
}
.nav div.media_button {
display: block;
}
}
.daddcenter {
margin: 0;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
/* Footer */
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
font-size: 10px;
}
/*DADD HOME*/
/*DADD MEDIA*/
.Socail_MediaLinks{
margin: 0;
font-size: 50px;
position: absolute;
list-style-type: none;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)}
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute,
convert, modify or reverse engineer this font software. Please contact Monotype with any questions
regarding Web Fonts: https://www.linotype.com
*/
<!DOCTYPE html>
<html>
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2") format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push("738462"); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<link rel="icon" href="LOGODADD.png" type="image/png">
<link rel="stylesheet" href="dadd1.css">
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<nav class="nav">
<div class="container">
<div class="logo" id="navlogo">
DADD
</div>
<div class="main_list" id="mainListDiv">
<ul>
<li>MUSIC</li>
<li>MEDIA</li>
<li>TOUR</li>
<li>SHOP</li>
</ul>
</div>
<div class="media_button">
<button class="main_media_button" id="mediaButton">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<footer>
<p>D.R.E.A.M. LLC</p>
</footer>
</div>
<!--image-->
</body>
</html>
You need to download the 'Fonts' folder from linotype. Check here
..and remove the 'src' attribute from your div.logo
I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I am having an issue with trying to figure out why the header on my mobile format isn't showing up.... can anyone see something I can't?? I have been trying for two weeks and I must be missing something. It appears that my larger version is working just fine, but I would appreciate any help I can get with this problem. Thank you.
/* very small mobile styles */
#media only screen and (max-width: 320px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 0;
margin: 0;
}
main img {
max-width: 300px;
height: auto;
padding: 0;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
font-weight: bold;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 0.75em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* mobile portrait styles */
#media only screen and (max-width: 768px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
text-align: center;
position:relative;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 5px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 1em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* laptop styles */
#media only screen and (max-width: 1024px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* large laptop styles */
#media only screen and (max-width: 1362px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
width: 236px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* desktop styles */
#media only screen and (max-width: 1440px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 500px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* HD styles */
#media only screen and (min-width: 1441px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 300%;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Volume Salon Westlake</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container-header">
<div class="top-left">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo">
<div class="top-right">
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</div>
<div class="container-header-mobile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo"><br>
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</header>
<main>
<div>
<h1>Volume Salon, located in Westlake, Ohio is... To view offered services and schedule an appointment with one of our independent sylists, visit the links below:</h1>
</div>
<div>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nikki.png" alt="Nikki">
<figcaption>Nikki</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kevin.png" alt="Kevin">
<figcaption>Kevin</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kelley2.png" alt="Kelley">
<figcaption>Kelley</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/anne-marie.jpg" alt="Anne-Marie">
<figcaption>Anne-Marie</figcaption>
</figure>
</div>
<div class="bot-social">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<br><br><br>
</main>
<footer>
<p>© 2018 Volume Salon</p>
<p>Made with ♥ by Valarie Pisarcik</p>
</footer>
</body>
</html>
your header doesn't show up in width fewer than 320px because you set dispaly: none.
.container-header {
display: none;
}
please change it to :
.container-header {
display: block;
}
See if this helps you:
https://codepen.io/panchroma/pen/NBaNXv
Remember that CSS code cascades. If your stylesheet has
.element{
display:block;
}
.....
.element{
display:none;
}
then the display property for .element will be none.
In your CSS code you have
#media only screen and (max-width: 320px) {
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
}
...
#media only screen and (max-width: 1024px) {
.container-header-mobile {
display: none;
}
}
There are two ways to stop one media query from overriding another.
In my pen I modified your media queries by adding a (min-width) to each of them, eg
#media only screen and (max-width: 320px) {
...
}
#media only screen and (min-width: 321px) and (max-width: 768px) {
...
}
#media only screen and (min-width: 769px) and (max-width: 1024px) {
...
}
the other option is to reverse the order of your media queries, have the desktop viewport first and the mobile viewport last:
#media only screen and (min-width: 1441px) {
...
}
#media only screen and (max-width: 1440px) {
...
}
#media only screen and (max-width: 1362px) {
...
}
Hope this helps!