Impossible syntax mistake?

mediacogent99 · April 8, 2021, 2:17pm

@font-face {
  font-family: 'Nova Slim';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/novaslim/v14/Z9XUDmZNQAuem8jyZcnOz8mJ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
display:flex;
justify-content: center;
flex-direction:column;
margin: 0px;
background-color: rgba(100,125,150,1);
/* background-color: rgba(100,125,150,1); */
}
#header {
position:fixed;
top: 0px;
width: 100%;
max-height:100px;
background: rgba(100,125,150,1);
z-index:999
}
#nav-bar {
display:flex;
justify-content: space-between;
}
#header-img {
height:100px;
}
ul {
display:flex;
flex-direction: row;
list-style: none;
}
li {
transform:translatey(35%);
}
.nav-link {
text-decoration: none;
Font-family: Nova Slim;
text-transform:uppercase;
font-weight: 600;
font-size: 1.5em;
margin: 0px 3em;
color: rgba(255,255,255,.7);
}
.nav-link:hover {
color: rgba(255,255,150,1);
transition-duration: 400ms;
}
#background-img {
background-image: url(https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1653&q=80);
background-attachment: fixed;
margin: 0px;
text-align:center;
font-family: Nova Slim;
width:100%;
height:35em;
}
.slogan {
margin: 0px;
font-size: 5em;
text-align:center;
background-color: rgba(25,75,100,.2);
background-blend-mode:multiply;
color:rgba(255,255,235,1);
padding:2.9em 5em 2.9em 5em;
max-height:inherit;
animation-name: drop;
animation-duration: 3s;
animation-iteration-count: 1;
animation-play-state:
}
.section {
width:100%;
height:5em;
margin: 0px;
text-align: center;
font-family: Nova Slim;
font-size: 10em;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
.section1 {
background-color: rgba(250,250,250,1);
height: 600px;
display:flex;
width: 1500px;
align-items: center;
justify-content:space-evenly;
flex-direction: row;
margin:auto;

}
#card {
background-color: rgba(50,150,255,1);
width: 200px;
height: 300px;
border-radius: 5px;
border: rgba(50,150,255,.8) solid 2px;
box-shadow: 7px 4px 12px 3px rgba(0,0,0,0.3)
}
#product-image {
width:inherit;
height:inherit/2;
}
#button-purchase {
border-radius: 5px;
position: absolute;
margin:1em 4.7em 0em;
}
#button-purchase:hover {
background-color: rgba(50,150,255,1);
color: rgba(255,255,50,1);
transition-duration: 400ms;
}
#about {
}
article {
display:flex;
flex-direction: row;
justify-content: center;
font-family: sans-serif;
font-weight: 800;
font-size:5em;
height: 10em;
color:rgba(255,255,235,1);
margin:auto;
}
#video {
width:600px;
height:400px;
transform: translatex(203px);
margin: 0px 1em 0px 0px;
}
#support {
position:relative;
background-color: rgba(50,150,255,1);
background-size: cover;
display:flex;
justify-content:center;
width: 50%;
height: 40em;
margin:auto;
border-radius:10%;
overflow:hidden;
}
#form {
position:absolute;
top: 80px;
left: 100px;
}
#name,
#email,
#tel, 
#submit {
font-family: Nova Slim;
font-size:2em;
width: 12em; 
border-radius: 5px;
}
#submit {
margin-left: 4em;
}
#submit:hover {
margin-left: 4em;
background:rgba(0,0,0,0.1);
color: rgba(255,255,50,1);
transition-duration: 400ms;
}
#support-img {
position:absolute;
right: 50px;
top: 7px;
width:inherit;
height: 450px;
border-radius:10%;
}

h1 {
margin: 0px;
padding-top: 1em;
font-weight: 800;
color:rgba(235,235,235,1);
}
p {
font-family: sans-serif;
font-size: 1em;
padding: 0em 2em 1em;
width: 17ch;
max-height: 2.5em;
overflow:hidden;
margin: 1em 0px;
}
h2 {
font-family: sans-serif;
font-weight:800;
font-size: 2em;
}
@keyframes gradient{
  0% {
  background: rgba(100,125,150,1);
  }
  100%{
  background: rgba(50,150,255,1);
  }
}

@keyframes drop {
  0% {
  opacity:0;
  transform: translatey(-10%);
  background-color: transparent;
  }
  50% {
  background-color: transparent;
  transform: translatey(0%)
  }
  100% {
  opacity: 1;  
  }
}
#menu {
display: none;
}
@media (max-width:1300px) {
body {
display:flex;
justify-content: center;
flex-direction:column;
margin: 0px;
background-color: rgba(100,125,150,1);
/* background-color: rgba(100,125,150,1); */
}
#header {
position:fixed;
top: -1px;
width: 100%;
min-height:50px;
max-height:10vh;
background: rgba(100,125,150,1);
margin: 0px;
z-index:999
}
#menu {
display:inline;
float:;
  }
#menu:checked ~ nav {
background: rgba(100,125,150,1);
background-size:cover;
float: right;
max-width: 50vw;
min-width: 10vw;
height: 100vh;
display:flex;
justify-content:center;
flex-direction: column;
  }
#nav-bar {
display:none;
}
#header-img {
position: absolute;
top: 0px;
right:0px;
width:50vw;
height: 100vh;
}
ul {
display:flex;
flex-direction: column;
list-style: none;
}
.nav-link {
text-decoration: none;
Font-family: Nova Slim;
text-transform:uppercase;
font-weight: 600;
font-size: 1.5em;
margin: 2em 1em 2em .25em;
color: rgba(255,255,255,1);
display:flex;
}
  #slogan {
 all: unset;
background-color: transparent;
font-size: 1em;
padding: 0;
overflow: hidden;
  }
}

can someone explain to me why the @media not working? basically I am trying to change the slogan, I’ve tried using the function all: unset; doesn’t seem to work in code pen, basically what’s happening is some things are changing and some things aren’t I am not certain what could cause some properties to be over written.

I am in the right window size
all: unset; should be a valid function.
I am missing something. and I bet it is super basic.

mediacogent99 · April 8, 2021, 2:23pm

https://codepen.io/cogentmedia99/pen/NWdgLwK if anyone wants to visualize it. maybe even try changing the #slogan properties

Sylvant · April 8, 2021, 2:54pm

its a mess over there
Are you trying to shrink the page width on smaller screens? I noticed your #section1 had width set to 1500px. This is the first thing which holds your page so wide. From there on its a ladder to figure out which next element is keeping the page width stretched.

mediacogent99 · April 8, 2021, 3:03pm

yes I do realize that the id=“section1” is holding it open, but if you yourself try changing it the width to lets say 100vw, it won’t work, my question is regarding @media, and why it won’t reset.

could you explain why

@media (max-width: 600px) {
body{
all:unset;
}
}

it should give me a blank page, because it should clear all attributes

ilenia · April 8, 2021, 3:08pm

only of body, if you want to select all elements you need to use the universal selector *

mediacogent99 · April 8, 2021, 3:16pm

Haha, i’ve tried using the all attribute, i’ve tried a lot of ways to get @media to work. I’ve posted as the last resort, If you try that line of code, on the link I gave provided, it won’t clear the attribute. that is my question. I am not sure why, and I don’t belive my syntax is wrong. unless you can point out my mistake.

I tried doing display: none; which should hide the the element I am targeting, but it doesn’t.

gnragazzi · April 8, 2021, 3:20pm

I think the correct syntax is
@media screen and (max-width: px)

in this example you provide

@media (max-width: 600px) {
body{
all:unset;
}
}

it should be

@media screen and (max-width: 600px) {
body{
all:unset;
}
}

mediacogent99 · April 8, 2021, 3:21pm

let me try that, i’ve watched Kevin Powell’s video and used his syntax and literally saw it working for him, but I will try this, thanks for your suggestion.

mediacogent99 · April 8, 2021, 3:28pm

I’ve tested this and

@media screen and (max-width: px) {
body {
all:unset;
}
}
@media (max-width: 600) {
body {
all:unset;
}
}

I’ve tried both, and both actually work, however, in both cases, the same situation happens. #slogan {} on my website when I try to do display:none; doesn’t work. I am fairly sure the media query gets over written somewhere, I know I am not using !important; so that shouldn’t be it. I just don’t understand what is causing it.

gnragazzi · April 8, 2021, 3:32pm

Hello There!
I take a better look at your code and i notice that the first time you selected the slogan you did it with a class selector (.) and inside the media query you did it with an id (#) selector. Maybe the html element does not have the id #slogan but the class .slogan.

mediacogent99 · April 8, 2021, 3:35pm

dam you are a genius! I’ve been coding all night trying to finish this landing page project, and I knew something wasn’t adding up. thanks I needed fresh eyes to tell me what was wrong.

gnragazzi · April 8, 2021, 3:37pm

Happy to help, Man!
I’m in the same situation, but in the APIs section

mediacogent99 · April 8, 2021, 3:37pm

dam haha, I wish I could help. can’t wait to get out of of HTML and CSS. so I can learn some java script.

system · October 8, 2021, 3:38am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.