My Span element is not responding to css on mobile devices - html

Question

My spans with hover work on a tablet (my iPad) and desktop computer. However, on my phone the CSS styling disappears, while I understand that hover effects don't really "work" on phones/touch screens but part of the CSS is hiding the span when not hovered over.
HTML:
<section id="proj1">
<a href="EJ.html">
<img id="c" src="img/rjcover.jpeg">
</a>
<span id="one">
Envisioning Justice
<br>
<br>
May 2020
</span>
</section>
CSS:
span {
display: none;
position: absolute;
font-size: 10px;
padding: 5px;
text-transform: uppercase;
z-index: 1;
font-family: 'Darker Grotesque', sans-serif;
font-size: 25px;
background-color: #FAD714;
color: white;
width: 75%;
margin-top: -190px;
}
#proj1:hover #one {
display: block;
}
#proj2:hover #two {
display: block;
}
#proj3:hover #three {
display: block;
}
#proj4:hover #four {
display: block;
}
http://iam.colum.edu/students/riley.jakusik/designbyriley/
that is the link to it live.

Answer 1

You should always take into consideration what will create the best user-experience. If you are setting display:none on your span element and then displaying that element on hover you are creating a situation for users who are on a device that does not support the hover state that will not be the best experience for them. One possible solution would be to use a hover media query. This way you can specify styling that will apply to users that are on a device that supports that feature, and if not you can specify a fallback for users that are on a device that does not:
#media (hover: hover) {
#one {
display: none;
}
#proj1:hover #one {
display: block;
}
}
The CSS #supports rule will also be a useful tool to familiarize yourself with.
EDIT: And thank you to #SandeshSapkota for pointing out that hover state is still supported in many mobile devices, but I think that it is useful to familiarize yourself with the aforementioned hover media query as it is a useful tool in many situations. A better approach to your issue may be to instead implement a media query that tests for viewport width, and if it is smaller than say 641px, which is the value that Foundation uses to detect mobile devices then just show the span element by default:
#media (max-width: 641px) {
#one {
display: block;
}
This query means that if the device in question has a viewport width at a maximum of 641px then apply the styles.