I'm trying to overlap the text over the div below it. The problem is that I need it all in the bottom right of the page so it already has position: absolute.
This is what I currently have.
And this is what I'm trying to make it look like:
https://jsfiddle.net/7ow5p192/
body {
background-color: black;
}
.title {
color: white;
text-align: left;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
text-align: left;
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
}
.nameContain2 {
position: relative;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>
A simple text-align: right should do the trick.
body {
background-color: black;
}
.title {
color: white;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
text-align: right;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>
I am currently working on a website and I have an element that I have explicitly declared: display: inline-block and visibility: visible however, the element is still invisible. This is only occurring on mobile devices. The invisible element is <div id="clock">.
#font-face {
font-family: 'bitwise';
src: url('bitwise.ttf');
font-display: swap;
}
* {
font-family: 'bitwise', monospace;
margin: 0;
padding: 0;
outline: 0;
}
:root {
background-color: #008080;
}
body,
html,
.wrapper {
width: 100%;
height: 100%;
}
span {
color: #FFFFFF;
font-size: 18pt;
text-align: center;
display: inline-block;
}
h1 {
color: #FFFFFF;
text-align: center;
display: inline-block;
}
input {
font-family: 'bitwise', monospace;
background-color: #535353;
color: #FFFFFF;
font-size: 18pt;
overflow: hidden;
text-align: center;
line-height: inherit;
height: inherit;
}
img:not(.noresize) {
width: 35%;
height: 35%;
}
video {
width: 35%;
height: 35%;
}
a:link {
color: #EFCF7C;
}
a:visited {
color: #105733;
}
button {
background-color: #105733;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#back {
background-color: #660000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
.center {
display: flex;
flex-wrap: wrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
align-items: center;
justify-content: center;
}
#start {
float: left;
}
#clock {
float: right;
position: relative;
text-align: center;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
#icons {
padding-top: 8px;
}
#content {
padding-top: 10px;
}
.break {
flex-basis: 100%;
height: 0;
}
#content {
width: 675px;
height: 300px;
}
#media screen and (max-width: 1079px) {
html,
body {
overflow: hidden;
}
#clock {
float: right;
position: relative;
bottom: 100px;
text-align: center;
display: inline-block;
visibility: visible;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
}
<div id="taskbar">
<div id="start"><img class="noresize" src="/assets/start.png"></div>
<div id="clock"><img class="noresize" src="/assets/clock.png">
<div id="clocktime"></div>
</div>
</div>
<div id="icons"><img class="noresize" src="/assets/icons.png"></div>
<div class="center"><img class="noresize" src="/assets/ie.png"></div>
<div class="center" id="content">
Content here.
</div>
Screenshot 1 - What the page should look like. Note the clock in the lower-right corner.
Screenshot 2 - What the page actually looks like on mobile.
Screenshot 3 - Chrome DevTools showing the element as being in a visible spot, but still not being visible.
I see that that css is only appliable when max-width is equal to 1079px.
Try to increase that number in inspector element to see what happens.
So it turns out I had overflow: hidden set on #taskbar and this means that any children inside of the taskbar will not display, even if they are in a "visible" area. Adding bottom: 32px to set it inside of the taskbar worked.
Updated CSS:
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
<snip>
#media screen and (max-width: 1079px) {
#clock {
bottom: 32px;
}
}
I'm having some trouble with my CSS code. I want to add a class to my header element so that I can differentiate in my stylesheet between the header for my homepage and the header for content pages. I started out with a header without a class, and everything was functioning properly. Suddenly, when I decided to add a class to my header element, the background image disappeared, and I can't figure out why.
This works:
header {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}
When the corresponding HTML is as follows:
<header class="homepg1"><h1>Shannon Loves Sweets</h1>
<div class="homepgintro">
<img src="profile.jpg">
<h2>Hi there!</h2>
<p>I'm Shannon! I'm a super busy full-time employee/part-time student who <i>loves</i> sweets and all things fried. Join me on my journey to cook at home more often, and to eat healthier while still working in some sweet treats!</p></div></header>
But THIS CSS will not work, and makes the background image disappear:
.homepg1 {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}
What's going wrong? Here is the entire CSS code for my stylesheet (the version that is currently working as expected):
/* UNIVERSAL STYLES */
#page {
max-width: 1200px;
width: 85%;
left: 7.5%;
position: relative;
margin-top: 100px;
background-color: #D9C6C1;
border-radius: 25px;
overflow: hidden;
}
body {
font-family: 'Roboto Slab', Georgia, serif;
font-size: 16px;
background-color: white;
color: #fff;
}
h1 {
font-family: 'Pacifico', cursive;
font-size: 3em;
padding: 4px;
}
h2 {
font-family: 'Sunshiney', 'Comic Sans MS', cursive;
font-size: 2em;
margin: 0;
}
section {
padding: 10px;
}
/* STELLA SAYS */
.stellasays img {
border-radius: 100%;
width: 220px;
float: right;
}
/* NAVIGATION */
nav {
background-color: white;
top: 0;
left: 0;
width: 100%;
margin-bottom: 60px;
position: fixed;
z-index: 100;
}
nav li {
display: inline-block;
padding: 7px;
margin-top: 6px;
}
nav a {
font-family: 'Pacifico', cursive;
color: #cef0de;
border-bottom: 1px solid #cef0de;
text-decoration: none;
padding: 4px;
font-size: 1.3em;
transition: color 0.4s ease-in-out 0.2s;
}
nav a:hover, nav a:focus {
color: #E9BE68;
border-bottom: 1px solid #E9BE68;
}
/* HOMEPAGE STYLES */
header {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}
I want to do something like this: Preview
The idea is to make the responsive image before and after the H1 tag in CSS. But the only thing I managed is to put a normal line JSFiddle.
<h1 ><i class="logo"></i><span>HELLO WORLD</span></h1>
<style>
h1 {
position: relative;
color: #fff;
font-family: sans-serif;
font-size: 4.6rem;
font-weight: 700;
line-height: 4.6rem;
letter-spacing: .02rem;
margin: 0 auto 5rem;
padding: 0 1rem;
text-align: center;
text-transform: uppercase;
}
h1 span {
display: inline-block;
position: relative;
padding: 0 20px;
}
h1 span:before, h1 span:after {
content: '';
display: block;
width: 500px;
position: absolute;
top: 0.73em;
border-top: 1px solid white;
}
h1 span:before {
right: 100%;
}
h1 span:after {
left: 100%;
}
</style>
I managed somehow to get the images before and after the h1 tag, but they aren't responsive JSFiddle.
<h1 class="heading"><i class="logo"></i>Welcome World</h1>
<style>
h1{
display: block;
}
h1.heading {
position: relative;
color: #fff;
font-family: sans-serif;
font-size: 4.6rem;
font-weight: 700;
line-height: 4.6rem;
letter-spacing: .02rem;
text-align: center;
text-transform: uppercase;
width: 100%;
margin: 0;
margin-top: 30px;
padding: 0;
}
h1.heading:before {
display: inline-block;
margin: 0 20px 8px 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/fcoggcZ.png) no-repeat;
width: 100%;
height: 87px;
position: absolute;
left: 0%;
}
h1.heading:after {
display: inline-block;
margin: 0 20px 8px 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/KCzu3hE.png) no-repeat;
width: 100%;
height: 87px;
position: absolute;
right: -83rem;
}
</style>
Sorry for the code, it's a little messy, i'm still beginner at it.
You just needed to fix the widths of the before and after elements. They were 100% so were taking up the full width of the title.
I also dropped the font-size. You'll have to take care of that with media queries if you want it to grow on larger screens etc.
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: #000;
}
h1{
display: block;
}
h1.heading {
position: relative;
color: #fff;
font-family: sans-serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 87px;
letter-spacing: .02rem;
text-align: center;
text-transform: uppercase;
width: 100%;
margin: 0;
margin-top: 30px;
padding: 0;
}
h1.heading:before {
display: inline-block;
margin: 0 20px 8px 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center;
width: 30%;
height: 87px;
position: absolute;
left: 0;
}
h1.heading:after {
display: inline-block;
margin: 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center;
width: 30%;
height: 87px;
position: absolute;
right: 0;
}
<h1 class="heading"><i class="logo"></i>Welcome World</h1>
EDIT
I get too into these...
A safer bet would be to wrap the text in a span, then drop off your position absolutes. that way you, if space gets too tight - it will go onto another line.
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: #000;
}
h1{
display: block;
}
h1.heading {
position: relative;
color: #fff;
font-family: sans-serif;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .02rem;
text-align: center;
text-transform: uppercase;
width: 100%;
margin: 0;
margin-top: 30px;
padding: 0;
}
h1.heading:before {
display: inline-block;
margin: 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center;
width: 30%;
height: 87px;
left: 0;
vertical-align:middle;
}
h1.heading:after {
display: inline-block;
margin: 0;
content: " ";
text-shadow: none;
background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center;
width: 30%;
height: 87px;
display:inline-block;
vertical-align:middle;
}
h1.heading span {
width:40%;
display:inline-block;
vertical-align:middle;
}
<h1 class="heading"><span>Welcome World</span></h1>
For the fun, you can also simplify your code with the use of flexbox, which is completely compatible with pseudo elements.
The nice thing is that the images position will adjust to the title width, so you could define a max-width to the h1 div & let flexbox handle the rest.
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: #000;
}
h1{
display: flex;
color: #fff;
font-family: sans-serif;
letter-spacing: .02rem;
text-align: center;
text-transform: uppercase;
min-height: 87px;
}
h1:before,
h1:after {
content: " ";
flex: 1;
}
h1 div {
padding: 0 20px;
align-self: center;
}
h1:before {
background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right 20px center;
}
h1:after {
background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left 20px center;
}
<h1><div>Welcome World</div></h1>
<h1><div>Hey</div></h1>
I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site ☛here☚</p></div>
<div id="footer">
<p>© Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content