Happy Panda Skulls Happy Panda Skulls - 1 year ago 47
CSS Question

Text not appearing on screen

I am making an app for phones with html where I want only the center to scroll. So, to test it, I put the word hello in there a bunch. Now I can't find the text I inserted.

(Please don't point out all my other mistakes, I know those are there, and I'm doing that later)

(Also, it probably looks terrible on a computer because of my use of

px
as a measurement. I'd recommend using a mobile compiler like Dcoder)

CSS

body {
background-color: #000000;
}
.head {
background-color: #555555;
margin: 0px;
width: 102.3%;
height: 60px;
align: center;
left: -8px;
top: -9px;
position: fixed;
}
.main_user_name {
color: #9e9e9e;
position: fixed;
top: -26px;
left: 55px;
font-size: 23px;
}
.lower_auto_name {
color: #ffffff;
position: fixed;
left: 55px;
}
.back {
margin: 15px;
height: 30px;
float: left;
top: 7px;
position: fixed;
}
.user_settings {
color: ffffff;
position: absolute;
top: 2px;
right: -160px;
font-size: 10px;
border: none;
}
.foot {
background-color: #555555;
margin: 0px;
width: 415px;
height: 50px;
align: center;
left: -55px;
top: 508px;
position: fixed;
}
.enter_message {
color: #777777;
margin: 0px;
top: 452px;
left: -30px;
position: relative;
z-index: 1;
}
.modal1 {
height: 60px;
font-size: 20px;
display: none;
z-index: 1;
background-color: #555555;
left: 0px;
top: 380px;
color: #ff0707;
position: fixed;
width: 100%;
text-align: center;
padding: 0px;
}
.modal2 {
height: 60px;
font-size: 20px;
display: none;
z-index: 1;
background-color: #555555;
left: 0px;
top: 440px;
color: #ff0707;
position: fixed;
width: 100%;
text-align: center;
padding: 0px;
}
.modal3 {
height: 60px;
font-size: 20px;
display: none;
z-index: 1;
background-color: #555555;
left: 0px;
top: 499px;
color: #ffffff;
position: fixed;
width: 100%;
text-align: center;
padding: 0px;
}
.everything {
top: 60px;
left: 5px;
z-index: 1;
}


HTML

<div class="head"><a href="main_screen.html">
<img src="/storage/emulated/0/pictures/eraser/back.png" class="back">
</div></a>
<div class="main_user_name">
<h3><b>Mom</b></h3>
</div>
<div class="lower_auto_name">
<h5>#113A675_76G</h5
</div>
<div class="foot">
</div>
<div class="enter_message">
<h3>Enter Message</h3>
</div>
<div class="user_settings"
<button onclick="document.getElementById('id01').style.display='block';document.getElementById('id02').style.display='block';document.getElementById('id03').style.display='block'">●<br>●<br>●</button>
</div>
<div id="id01" class="modal1">
Block User
</div>
<div id="id02" class="modal2">
Delete All Messages
</div>
<div id="id03" class="modal3" onclick="document.getElementById('id01').style.display='none';document.getElementById('id02').style.display='none';document.getElementById('id03').style.display='none'"">
Cancel
</div>
</div>
<div class="everything">
<p>
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
hellohellohellohellohellohellohello
</p>
</div>

Answer Source

Use below css, you should be able to see hello red in color, You have other issues but as you said you will be fixing those.

.everything {
   color:red;
    top: 60px;
    left: 5px;
    z-index: 1;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download