Responsive Banner Issues


(Brett) #1

Hi again, I have built a 300x250 banner that on click expands to fill the screen of the device it is being viewed on.

When I check using Hype Reflect on my phone the banner works good, but when I traffic through Sizmek it doesn’t work as it should.

I have attached some screen shots of the above issue. Also the working file is below.

https://spaces.hightail.com/receive/9hFXS

Thank you for any help, Cheers Brett.


(Jonathan Deutsch) #2

Sizmek does have a guide for producing expandable banners with Hype:

I recommend starting with the .hypetemplate file they include.


(Darren Hayles) #3

Hi Jonathan

I’m having a problem with positioning on a Sizmek expandable ad, in the Sizmek guide it states:

Positioning
Position the banner and/or panel by dragging them within the stage to where you want them to sit relative to each other in an expanded state.

This has confused me, as far as I can see there is no way for hype to position a scene relative to another.

I need my ad to expand to the left but using the Sizmek template once the banner ad has been uploaded to sizmek italways centres itself so that when the expand button is click the expand panel expands both to the left and right. See below:


Any help would be much appreciated.
Cheers


(Darren Hayles) #4

I’ve just been chatting with Sizmek support and it looks like there is an error with the template posted above if you want the ad to expand to the left, we have managed to fix this by adding the following to the HTML Head:

<style>
  #default_hype_container {
		margin: 0 !important;
		width: 560px !important;
  }

  #default_hype_container > div:nth-child(3) {
        left: 260px !important;
  }
</style>

You will need to change #default to the name of your html file.

The two numbers given in the above css ‘560px’ and ‘260px’ will need to correspond with those given in the EBModulesToLoad script, i.e.:

<script>
    EBModulesToLoad = ['EBCMD']; 
    function initSizmek() {
        EB.initExpansionParams(260, 0, 560, 250);
    }
</script>