Can you override the media queries for form elements?

I have a landing page that I’ve built and have used the absolute positioning on the desktop version of the page to position a list of radio buttons exactly where I want it. Unfortunately when moving to mobile the absolute positioning on desktop is maintained. I looked in developer tools to see if there is a media query for setting the positioning, which there is (at max-width: 600px) but any CSS I add to my stylesheet cannot override it. I have used the exact CSS selector for the element and have used !important in hopes of being able to override the initial desktop positioning but nothing happens!

Anyone have any insight on how to make this work?

Hey @MattWelcome would you be able to share the URL to this page?

Maybe because it’s Friday I am having trouble understanding the issue :crazy_face: You could also just add a mobile only CSS…?

@media only screen and (max-width: 525px) {
blah blah blah !important;
1 Like

Thanks Kyle, I figured out that the simplest solution was to request a different stylesheet depending on the end-user’s device size. Some reason running everything in one stylesheet did not seem to allow any media query CSS changes to occur.

1 Like