How to target code in desktop view only - Prestige Theme

Shopify Discussion

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.
1

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

Screenshot 2024-08-13 at 17.01.54.png
Screenshot 2024-08-13 at 17.01.54.png2876×668 76.9 KB

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

Photo 13-08-2024, 16 57 31.png
Photo 13-08-2024, 16 57 31.png1170×2532 199 KB

1 Like
2

Wrap the cs with media query like this

Thanks

1 Like
3

You can try this @emilyaugstudios

1 Like