Currently working on my first project for the Responsive Web Design Certification on Freecodecamp, and I've run into a problem regarding text size.
To add some extra spacing, I decided to use FontAwesome icons as pseudoelements and wrap dates in a span tag.
The issue arises when viewing the page on smaller screens - the dates and icons shrink while other text remains unaffected.
Here's my code for the icons:
li:before{
font-size: 40px;
font-family: "FontAwesome";
position: absolute;
left: 0px;
top: 0px;
}
.bullet-1:before{
content:"\f0f8";
}
And for the dates:
.year{
display: inline-block;
margin-right: 20px;
font-weight: 600;
}
Any suggestions on how to resolve this? You can view the Pen here:
https://codepen.io/rubenvillarnet/pen/aQzBxV
Thank you!
Edit: Thank you for your responses. To clarify:
- This issue occurs only on mobile devices or when using Chrome's Device tab. Resizing the browser window doesn't replicate the problem.
- I have attempted using vh units, but the icons and dates still appear significantly smaller compared to the rest of the text.