Changing HTML from CSS media query

Question

I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from calendar.html to ca

Answer 1

I think it will easy if you create both link in html

    Schedule


    Schedule
 

and then use the css to hide the one that you don't want to show

#schedule_link_mobile{
    display: none;
}
#schedule_link_pc{
    display: inline-block;
}
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
    #schedule_link_mobile{
        display: inline-block;
    }

    #schedule_link_pc{
        display: none;
    }
}