Overlay Page Issue

[Eightmuro8]

http://malaprojects.com/
Hello I need assistance on why the css is not working?

CSS:
#about-overlay {
    font-family: 'BentonSans-Regular', 'Helvetica Neue', 'Helvetica', sans-serif;
position: fixed;
display: none;
z-index: 10;
top: 0;
height: 100vh;
width: 100vw;
background: yellow;
pointer-events: none;

-webkit-justify-content: space-between;
    justify-content: space-between;

/-moz-transition: opacity .1s;
-webkit-transition: opacity .1s;
-ms-transition: opacity .1s;
-o-transition: opacity .1s;
    transition: opacity .1s;/
}

#about-link {
    z-index: 5;
}

#about-overlay p {
    margin: 150px 3.125%;
}

#about-overlay a {
    pointer-events: all;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

#about-close {
    pointer-events: all;
    cursor: pointer;
    cursor: hand;
    margin: 22px 3%;
}

#about-close img {
    width: 35px;
}

.bottom-left {
    top: auto;
    bottom: 22px;
    left: 3%;
}

Top of HTML :

<div id="about-overlay">
<p id="about-content" class="sitetitle-txt-inner">
Erica Smith is a multidisciplinary designer
<br>based in Los Angeles. She received her
<br>BFA in August 2017 from ArtCenter College
<br>of Design in Pasadena, CA.
<br><br>Resume available upon request.
<br><span><a href="mailto:hello@ericasmith.co">hello@ericasmith.co</a></span>

</p>


<div id="about-close">
<img src="/wp-content/uploads/2017/08/ES_X.png">
</div>

</div>

<a id="about-link" href="malaprojects.com/contact" class="sitetitle txt bottom-left">
<div class="sitetitle-txt-inner">
Contact
</div>
</a>#about-overlay {
font-family: 'BentonSans-Regular', 'Helvetica Neue', 'Helvetica', sans-serif;
position: fixed;
display: none;
z-index: 10;
top: 0;
height: 100vh;
width: 100vw;
background: yellow;
pointer-events: none;

-webkit-justify-content: space-between;
justify-content: space-between;

/-moz-transition: opacity .1s;
-webkit-transition: opacity .1s;
-ms-transition: opacity .1s;
-o-transition: opacity .1s;
transition: opacity .1s;/
}

#about-link {
z-index: 5;
}

#about-overlay p {
margin: 150px 3.125%;
}

#about-overlay a {
pointer-events: all;
color: black;
font-weight: bold;
text-decoration: none;
}

#about-close {
pointer-events: all;
cursor: pointer;
cursor: hand;
margin: 22px 3%;
}

#about-close img {
width: 35px;
}

.bottom-left {
top: auto;
bottom: 22px;
left: 3%;
}

[mariusjopen]

Hi @Eightmuro8
this here you also need to post into the Custom CSS section:

#about-overlay {
font-family: 'BentonSans-Regular', 'Helvetica Neue', 'Helvetica', sans-serif;
position: fixed;
display: none;
z-index: 10;
top: 0;
height: 100vh;
width: 100vw;
background: yellow;
pointer-events: none;

-webkit-justify-content: space-between;
justify-content: space-between;

/-moz-transition: opacity .1s;
-webkit-transition: opacity .1s;
-ms-transition: opacity .1s;
-o-transition: opacity .1s;
transition: opacity .1s;/
}

#about-link {
z-index: 5;
}

#about-overlay p {
margin: 150px 3.125%;
}

#about-overlay a {
pointer-events: all;
color: black;
font-weight: bold;
text-decoration: none;
}

#about-close {
pointer-events: all;
cursor: pointer;
cursor: hand;
margin: 22px 3%;
}

#about-close img {
width: 35px;
}

.bottom-left {
top: auto;
bottom: 22px;
left: 3%;
}

Yes, no? I don't know how it should look in the end.

Let me know!

Marius

[Eightmuro8]

Hey @mariusjopen,

I am trying to have like a page overlay? if that's what you would call it.

I am referencing a friends site. Where u click on the "About" section and a page overlays on top.

http://www.ericasmith.co/

[mariusjopen]

Hi @Eightmuro8
ok. I see.

I would make it differently.

I would make an extra page and put everything in what you want to have on the overlay page.

Then you define this page as a footer of another page.

With CSS you can give that footer a

position: fixed; 
top: 0px, left: 0px, 
width: 100vw, 
height: 100vh;

I hope that helps!

Best!

Marius