Adjusting Header Icon Display for Mobile Version

I'm currently using code to replace the login/account text in the header with an icon. While it looks great on the PC version, the mobile version appears unappealing. How can I modify the mobile version to display text instead of an icon? Thank you!

Quote

/* Login text to icon */
.user-accounts-text-link span {
    color: transparent;
}
.user-accounts-text-link {
    background-image: url(https://i.ibb.co/2yD0xXq/360-F-448443831-jx-Cl2q-W7m-In-Z2-Je-Tp9d3-BF3-Jw-N9-XRVFE.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

33 minutes ago, Spark-Plugin said:

Hi @LukeHoll, You can use the same code and add a parameter to ensure it functions only on desktop. Here’s the updated code:

/* Login text to icon - apply only on desktop */
@media screen and (min-width: 800px) { /* Adjust the min-width according to your breakpoint */
    .user-accounts-text-link span {
        color: transparent;
    }
    .user-accounts-text-link {
        background-image: url(https://i.ibb.co/2yD0xXq/360-F-448443831-jx-Cl2q-W7m-In-Z2-Je-Tp9d3-BF3-Jw-N9-XRVFE.png) !important;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
    }
}

 

That works great thanks!