How to target code in desktop view only - Prestige Theme

Topic summary

A user added custom CSS to their Prestige theme’s theme.liquid file to reposition social media icons in the footer using absolute positioning. The code works well on desktop but causes layout issues on mobile devices.

Current CSS approach:

  • Uses .social-media--list with absolute positioning
  • Sets specific top positioning (84px)
  • Modifies footer button styling

Proposed solution:
Wrap the CSS code in a media query to target only desktop views. This would restrict the styling changes to larger screens while leaving mobile layout unaffected.

Status: The discussion appears to have responses suggesting the media query solution, but the conversation seems incomplete or contains formatting issues that make the full responses unclear.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

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?

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

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) –

1 Like

Wrap the cs with media query like this


Thanks

1 Like

You can try this @emilyaugstudios

1 Like