Text smaller on screen resize

HTML-CSS
1

Hi everyone:

I’m making the first project in Freecodecamp’s Responsive Web Design Certification and I’m having an issue with some text size.

I have included some FontAwesome icons as pseudoelements and wrapped some dates within a span tag in order to give them some extra spacing.

The issue is that in smaller screen sizes both the dates and the icons get smaller but it doesn’t happen with the rest of the text. The issue only happens on mobile devices or in Chromes’s Device tab. It works well if the browser is simply resized.

My code for the icons is:

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;
}

How could I fix it? This is the Pen:

Thanks a lot

2

the first lesson of media tells you how Create a Media Query