I’m trying to add some text in the footer to the left of the buttons. Can’t seem to get the text to appear. Please see the current screen shots:
Thank you
Hi,
Throw the code into a codepen or post full html and css as I can’t really work from screenshots and I’m certainly not going to transcribe code from a screenshot to test 
BTW there is no html element called p3 so don’t make up your own.
I’m guessing that your text is probably hidden below the fold but I work best with code examples when needing to debug.
2 Likes
Ok, here’s the code and a current screen shot. I got things to work by playing around but I’m sure there’s a better way, lol. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
name="description"
content="Welcome to the children's book - Tales From The Glades Of Ballymore. A heartwarming tale of animal adventures in Ireland for your family."
/>
<link rel="stylesheet" href="style.css" />
<title>Welcome Page</title>
</head>
<header>
<h1 class="heading">
Tales From <br>
the <br> Glades of Ballymore
</h1>
</header>
<footer>
<div class="container">
<p class="p3">This site uses cookies.<br>Please read our Privacy Policy and select "Ok" or "No"</p>
<a class="button" href="../welcomeYpage/index.html">Ok</a>
<a class="button1" href="../welcomeNpage/index.html">No</a>
<a class="button2" href="../policyPage/index.html">Privacy Policy</a>
</div>
</div>
</footer>
</html>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Styling */
html {
font-family: "Georgia", serif;
line-height: 1.4vw;
background: #fffff0;
}
a {
text-decoration: none;
}
/* No Scrollbar*/
body {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
/*Background image using Aspect Ratio method*/
body::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
padding-top: 134.7%;
background-image: url(/imgMaster/map.jpg);
background-size: 100% auto;
max-width: 1500px;
}
/*Animations*/
@keyframes h1-color {
0%,
22%,
78%,
100% {
color: darkgreen;
}
35%,
65% {
color: #a27b16;
}
}
@keyframes button-color {
0%,
22%,
78%,
100% {
color: lightgoldenrodyellow;
}
35%,
65% {
color: #a27b16;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*Main Elements*/
.heading {
margin: 0;
padding: 10vh 1rem;
font-size: 5rem;
line-height: 1.4;
color: darkgreen;
text-shadow: 1px 5px 5px #333;
animation: h1-color 10s ease 3s infinite normal;
text-align: center;
}
.p3 { font-size: 1.6rem;
line-height: 2rem;
margin: -1vh 4.8vw 0vw 0vw;
font-weight: bold;
color: black;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-image: url("/imgMaster/lace-pattern.jpg");
color: white;
text-align: center;
border-top: solid 3px darkgreen;
padding-top: 0vh;
padding-bottom: 0vh;
}
.container {
left: 0;
top: 0;
right: 0;
height: 10vh;
max-width: 1500px;
overflow: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
text-align: center;
padding-bottom: 10vh;
padding-top: 3vh;
padding-right: 1vw;
}
.button, .button1, .button2 {
opacity: 0;
font-family: "Georgia", serif;
border: 0px;
border-radius: 15px;
padding: 1.5vh 2vw;
cursor: pointer;
font-size: 1.6rem;
min-width: 15px;
color: lightgoldenrodyellow;
background: darkgreen;
box-shadow: 4px 4px 8px #333;
margin: 1vh .5rem 2vh .5rem;
animation: fadein 0s ease 0s forwards,
button-color 10s ease 3s infinite normal;
}
.button:hover, .button1:hover, .button2:hover {
background: green;
}
1 Like
Please post the CSS too. 
1 Like
I could scroll??? 
/OT
No doubt there are numerous ways to add text, here is one way:
<footer>
<div class="container TMP">
<p class="p3 TMP">
<b style="float: left; font-size:small"> text goes here </b>
<br>
This site uses cookies.
<br>
Please read our Privacy Policy and select "Ok" or "No"
</p>
<a class="button" href="../welcomeYpage/index.html">Ok</a>
<a class="button1" href="../welcomeNpage/index.html">No</a>
<a class="button2" href="../policyPage/index.html">Privacy Policy</a>
</div>
</footer>
Additional temporary style:
/* outline does not change the size whereas border does */
.TMP {outline: solid 2px RED;}
Screendump
Thanks
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.