The knowledgebase is a categorized collection of answers to frequently asked questions (FAQ) and articles. You can read articles in this category or select a subcategory that you are interested in.
How to make 728x90 ad responsive on mobile devices?
Solution
In the modern web, visitors view website through many different types of devices: desktops, laptops, netbooks, TVs, tablets, smartphones, etc. This means there are many different screen dimensions and resolutions to consider. A common goal is that your website's content and accompanying ads should display correctly and consistently on the majority, if not all, of these devices.
There are a number of options that could help you to optimize banner ads to fit in mobile screens, including CSS, JavaScript, and device detection with ad serving technologies. Depending on your ad setup and existing website design, you can choose an option that works for your website and your advertiser's ads.
For your convenience, we are presenting one simple CSS solution that can help you to make 728x90 ad responsive to fit on mobile screens. PixFuture supports four major formats, such as 728x90, 160x600, 300x250, 320x50 where only 728x90 from these sizes won't fit on mobile devices. So, here is the solution:
1. Add in head of your HTML page the following CSS style (in between <head> and </head>).
<style>
@media all and (min-device-width: 700px) and (max-device-width: 728px) {#leaderboard-pixfuture {transform: scale(0.9);}} @media all and (min-device-width: 671px) and (max-device-width: 699px) {#leaderboard-pixfuture {transform: scale(0.9);transform-origin: 0 0;}} @media all and (min-device-width: 651px) and (max-device-width: 670px) {#leaderboard-pixfuture {transform: scale(0.88);transform-origin: 0 0;}} @media all and (min-device-width: 631px) and (max-device-width: 650px) {#leaderboard-pixfuture {transform: scale(0.85);transform-origin: 0 0;}} @media all and (min-device-width: 601px) and (max-device-width: 630px) {#leaderboard-pixfuture {transform: scale(0.8);transform-origin: 0 0;}} @media all and (min-device-width: 601px) and (max-device-width: 630px) {#leaderboard-pixfuture {transform: scale(0.8);transform-origin: 0 0;}} @media all and (min-device-width: 560px) and (max-device-width: 600px) {#leaderboard-pixfuture {transform: scale(0.75);transform-origin: 0 0;}} @media all and (min-device-width: 520px) and (max-device-width: 559px) {#leaderboard-pixfuture {transform: scale(0.7);transform-origin: 0 0;}} @media all and (min-device-width: 491px) and (max-device-width: 519px) {#leaderboard-pixfuture {transform: scale(0.65);transform-origin: 0 0;}} @media all and (min-device-width: 451px) and (max-device-width: 490px) {#leaderboard-pixfuture {transform: scale(0.6);transform-origin: 0 0;}} @media all and (min-device-width: 401px) and (max-device-width: 450px) {#leaderboard-pixfuture {transform: scale(0.55);transform-origin: 0 0;}} @media all and (min-device-width: 371px) and (max-device-width: 400px) {#leaderboard-pixfuture {transform: scale(0.5);transform-origin: 0 0;}} @media all and (min-device-width: 341px) and (max-device-width: 370px) {#leaderboard-pixfuture {transform: scale(0.46);transform-origin: 0 0;}} @media all and (min-device-width: 301px) and (max-device-width: 340px) {#leaderboard-pixfuture {transform: scale(0.42);transform-origin: 0 0;}} @media all and (max-device-width: 300px) {#leaderboard-pixfuture {transform: scale(0.4);transform-origin: 0 0;}}
</style>
2. Wrap ad tag code on the page in DIV with id="leaderboard-pixfuture" to call CSS from head.
Example:
<div id="leaderboard-pixfuture">
Ad Tag Code Of 728x90 unit
</div>
Article details
Article ID: 34
Category: Publishers