Ad shows elements outside of artboard when previewing/publishing

pjhe...@gmail.com

unread,

Mar 13, 2017, 3:43:31 AM3/13/17

to Google Web Designer beta

Hi, I've created an MREC ad and have designed some of the elements to slide into view from right to left. I have these elements positioned off the artboard (left-value 310px) which then slide into view (left-value 0px). When I go to preview the ad in Chrome, I can see my elements outside of the artboard area before they slide in.

I've created a similar ad about 2 months ago with sliding elements and noticed when I preview this one, the bounding edge of the artboard (dotted line) in my browser can be seen framing the correct MREC size. When I preview my new ad, the bounding edge seems to be around the whole size of my browser window screen, hence you can see the design elements hanging off the side.

Can anyone advise how this can be fixed? I originally thought it might be a bug with the new update to Google Web Designer (as I had designed the other advertisement pre-update using the same techniques) but would love to know if there's an easy way to fix my bounding box edges to display correctly when previewing/publishing. Thanks in advance.

San Khong

unread,

Mar 13, 2017, 4:01:34 PM3/13/17

to Google Web Designer beta

Hi pjhewitt,

You can use overflow: hidden; in the page CSS. If you create a banner ad in Google Web Designer, this CSS property is automatically added in the file. You can check it out by creating a banner ad and switch to code view and search for overflow: hidden;

Hope it helps,

San

Google Web Designer team

pjhe...@gmail.com

unread,

Mar 13, 2017, 4:20:37 PM3/13/17

to Google Web Designer beta

Hi San, each of my elements has the 'overflow; hidden;' CSS tag applied but it's still producing the same results — I can see the elements outside of the artwork frame when I preview in Chrome. Any other suggestions what might be happening?

San Khong

unread,

Mar 13, 2017, 4:22:30 PM3/13/17

to Google Web Designer beta

Please share your author file (not published file) with us so we can take a look. You can share it privately with me or send the link to gwd-s...@google.com.

Thanks,

pjhe...@gmail.com

unread,

Mar 13, 2017, 4:26:54 PM3/13/17

to Google Web Designer beta

The tag is also in the <head> section of the code:
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>

This was the same in my initial ad that I designed and it worked but not for this new one.

Message has been deleted

pjhe...@gmail.com

unread,

Mar 13, 2017, 4:54:28 PM3/13/17

to Google Web Designer beta

Hi San, I'm having trouble sending the files through via this post and when I click on your email link it won't open my email client to respond. I'm going to send the files via another email account (wendyhewitt@...)

Thanks.

San Khong

unread,

Mar 13, 2017, 4:58:33 PM3/13/17

to Google Web Designer beta

Please share it on drive and send me the URL. Thanks.

pjhe...@gmail.com

unread,

Mar 13, 2017, 5:00:49 PM3/13/17

to Google Web Designer beta

Excuse my ignorance but how do I do that? I am using my husbands email account to post to this forum so am unfamiliar with sharing docs on Google — sorry

Message has been deleted

San Khong

unread,

Mar 13, 2017, 5:07:27 PM3/13/17

to Google Web Designer beta

Zip files are blocked but probably not html. Can you please try sending me the html file?

pjhe...@gmail.com

unread,

Mar 13, 2017, 5:10:31 PM3/13/17

to Google Web Designer beta

Yes, I was trying to send zipped folders and it wasn't working. Here is the HTML file that currently isn't working correctly. Let me know if you want me to send the other ad that works if you need to compare. Thanks

GovInst_ShortCourseCert_Google_300x250_Mar_2017.html

San Khong

unread,

Mar 13, 2017, 6:00:11 PM3/13/17

to Google Web Designer beta

Thanks for the file. I looked at it and the file was set to be a responsive ad. But I do not see any media rules set so I'm assuming you do not want to make it a responsive ad. Please click on an empty area on stage to select the page. In the Properties panel, change the Width and Height of the page to px. For MREC, you probably want 300x250px. When you make the update, things should work properly in preview and publish.

pjhe...@gmail.com

unread,

Mar 13, 2017, 6:45:58 PM3/13/17

to Google Web Designer beta

Wow, that worked and it was such a simple fix! I must have had the initial ad I designed already set to px for the page while this one was set to % for some reason.
A thousand thanks, very happy that now works!
:)

marry...@gmail.com

unread,

Apr 21, 2017, 7:48:55 AM4/21/17

to Google Web Designer beta

This worked for me !!!!!! Thanks

bryony.c...@vouchercloud.com

unread,

Nov 14, 2017, 5:53:47 AM11/14/17

to Google Web Designer beta

Hi,

I am having the same proble,, however I want my ad to be responsive so that I can create lots of different sizes. It looks perfect in every size in the GWD preview, but when i look in chrome it doesn't look right and all the elements are hanging over the ad. When I go to publish these ads will they work? Do I need to create each ad size individually instead?

Thanks
Bryony

jeffrey...@gmail.com

unread,

Nov 16, 2017, 10:22:17 AM11/16/17

to Google Web Designer beta

thanks for this. I too was showing outside the ad space, and this was an easy fix.

toret...@gmail.com

unread,

Apr 22, 2018, 7:25:42 AM4/22/18

to Google Web Designer beta

Hi I also have the same issue. It set as PX but still the objects outside canvas showing in animation. please help

Kent

unread,

Apr 23, 2018, 11:40:55 AM4/23/18

to Google Web Designer beta

Do you have overflow:hidden set?

You can use overflow: hidden; in the page CSS. If you create a banner ad in Google Web Designer, this CSS property is automatically added in the file. You can check it out by creating a banner ad and switch to code view and search for overflow: hidden;

Hope that helps,

Kent

Google Web Designer team

Reply all

Reply to author

Forward