{"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":"2024-04-05T19:35:23","modified_gmt":"2024-04-05T19:35:23","slug":"media-queries","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/media-queries\/","title":{"rendered":"Media Queries"},"content":{"rendered":"

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

In many instances, changing a simple setting – like padding or a border between screen sizes -requires the element to be duplicated and then hidden\/show on each screen size.<\/p>\n

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

Step 1: <\/strong>Assign a custom CSS class to an element<\/p>\n

\"\"<\/p>\n

Step 2: <\/strong>Write CSS and media queries, associated with the custom class<\/p>\n

\"\"<\/p>\n

We found that you need to put !important at the close of each property, to overide\u00a0the ION generated styles.<\/p>\n

\n

If you have any questions, please contact us on help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/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":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2465\/revisions"}],"predecessor-version":[{"id":6381,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2465\/revisions\/6381"}],"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}]}}