Responsive on page load popup

Question

Currently I have this and it works perfect for mobile but the size is way too small for desktop.

<!-- Main Stylesheet -->
<p><link href="/adpopup-pro.min.css" rel="stylesheet" media="screen" type="text/css" /></p>

<!-- jQuery (load only if needed) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- Main Javascript -->
<script type="text/javascript" src="/adpopup-pro.min.js"></script>
<script type="text/javascript">// <![CDATA[

$(document).ready(function() {

    var ads = {
      'ad_1': {
        'type': 'image',
        'src': 'imagelink',
        'link': 'link',
      }

    }

    $('body').adPopupPro({
      ads: ads,
      width:320,
      height:320,
      overlay_color:'dark',
    });
  });
// ]]></script>

Is there anyway to somehow enclose this and have it load only on mobile and load another on desktop and larger sizes?

http://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px — Mohamed-Yousef, Nov 14 '16 at 22:56

score 1 · Answer 1 · edited May 23 '17 at 12:01

You can do it like this

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

}

EDIT: here is a link with a similar answer How to auto adjust the div size for all mobile / tablet display formats?

score 0 · Answer 2 · edited Nov 15 '16 at 04:29

0

Try this to check by your user-agent resolution and retrieve different values for your ad width and height.

$(document).ready(function() {

    var ads = {
      'ad_1': {
        'type': 'image',
        'src': 'imagelink',
        'link': 'link',
      }

    }

    $('body').adPopupPro({
      ads: ads,
      width:(function(){ 
        if(window.innerWidth>768){ //could be any breakpoint value! 
           var width = 320;
        }
        else{
           var width = 200;
        }
        return width; 
      })(),
      height: (function(){ 
        if(window.innerWidth<768){ //could be any breakpoint value! 
           var height = 320;
        }
        else{
           var height = 200;
        }
        return width; 
      })(),
      overlay_color:'dark',
    });
});
// ]]>

edited Nov 15 '16 at 04:29

Nisse Engström

4,738
23
27
42

answered Nov 14 '16 at 23:03

Yuri Pereira

1,945
17
24

Seemed like a good solution. Doesn't load the popup – MHeredia Nov 14 '16 at 23:13
Any thoughts on making this work? Seems like it should – MHeredia Nov 15 '16 at 16:32
Basically at this point I think I need to load two different codes. One for mobile, one for desktop. How can this be achieved? – MHeredia Nov 15 '16 at 16:59

Responsive on page load popup

2 Answers2