How to target code in desktop view only - Prestige Theme

[emilyaugstudios]

Hi, I added some code to the theme.liquid on my prestige theme store (code below). This was so I could align the social media icon links better in my footer, the only issue im having is the links now sit weirdly on mobile. Is there anything i can add to this code below so it still works but only targets desktop view? 

<style>
.footer__inner{
position: relative;
}
.social-media--list{
position: absolute;
top: 84px;
}
.footer__inner button.button {
background: unset !important;
color: #000 !important;
box-shadow: none !important;
border: unset;
border-bottom: 1px solid #000;
padding: 0 !important;
letter-spacing: normal;
}
</style>

Desktop view (want to keep this) –

Mobile View (not happy with the way this looks, specifically the how the social links and menu link items sit so close together) –

[Guleria · Accepted solution]

Wrap the cs with media query like this

<style>
@media only screen and (min-width: 767px) {
.footer__inner{
position: relative;
}
.social-media--list{
position: absolute;
top: 84px;
}
.footer__inner button.button {
background: unset !important;
color: #000 !important;
box-shadow: none !important;
border: unset;
border-bottom: 1px solid #000;
padding: 0 !important;
letter-spacing: normal;
}
}
</style>

Thanks

[Guleria · Accepted solution]

Wrap the cs with media query like this

<style>
@media only screen and (min-width: 767px) {
.footer__inner{
position: relative;
}
.social-media--list{
position: absolute;
top: 84px;
}
.footer__inner button.button {
background: unset !important;
color: #000 !important;
box-shadow: none !important;
border: unset;
border-bottom: 1px solid #000;
padding: 0 !important;
letter-spacing: normal;
}
}
</style>

Thanks

[BSS-TekLabs · Accepted solution]

<style>
@media only screen and (min-width: 600px) {
.footer__inner{
position: relative;
}
.social-media--list{
position: absolute;
top: 84px;
}
.footer__inner button.button {
background: unset !important;
color: #000 !important;
box-shadow: none !important;
border: unset;
border-bottom: 1px solid #000;
padding: 0 !important;
letter-spacing: normal;
}
}
</style>

You can try this @emilyaugstudios