{"id":2465,"date":"2023-02-23T19:00:44","date_gmt":"2023-02-23T19:00:44","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/media-queries\/"},"modified":"2026-07-16T00:43:58","modified_gmt":"2026-07-16T00:43:58","slug":"media-queries","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/media-queries\/","title":{"rendered":"Media Queries"},"content":{"rendered":"<p>A really helpful feature in ION, is the ability to add on custom CSS to elements and combining them with media queries. We found this to be very helpful in creating custom creatives.<\/p>\n<p>In many instances, changing a simple setting &#8211; like padding or a border between screen sizes -requires the element to be duplicated and then hidden\/show on each screen size.<\/p>\n<p>By using some custom CSS and a media query, we can\u00a0style specific elements on specific screensizes. Which allows us to only use one element across the 4 screen sizes.<\/p>\n<p><strong>Step 1: <\/strong>Assign a custom CSS class to an element<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-6379\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/04\/Media-queries-Step-1-1024x566.png\" alt=\"\" width=\"1024\" height=\"566\" \/><\/p>\n<p><strong>Step 2: <\/strong>Write CSS and media queries, associated with the custom class<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6378\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/04\/Media-queries-Step-2-1-scaled.png\" alt=\"\" width=\"3348\" height=\"1852\" \/><\/p>\n<p>We found that you need to put !important at the close of each property, to overide\u00a0the ION generated styles.<\/p>\n<hr \/>\n<p data-pm-slice=\"1 1 [&quot;bullet_list&quot;,{},&quot;list_item&quot;,{}]\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A really helpful feature in ION, is the ability to add on custom CSS to elements and combining them with media queries. We found this to be very helpful in creating custom creatives. In [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5492,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2080,2078],"tags":[2173,2139],"class_list":["post-2465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-css","category-the-advanced-capabilites","tag-advanced","tag-css"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2465"}],"version-history":[{"count":5,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2465\/revisions"}],"predecessor-version":[{"id":9073,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2465\/revisions\/9073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5492"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}