Images outside of page still showing in published file?

2396 views
Skip to first unread message

sarahpnnz

unread,
Jul 15, 2014, 1:18:26 AM7/15/14
to gwd...@googlegroups.com
I have image elements that start outside (or just outside) of my page boundary (300 x 250px) in my animated banner. When previewed within a browser, the boundary clips out the unwanted display of images outside the page. However, on Publish, these elements are not clipped out when I open and test the the html file?

Do I need to be doing something to ensure this clipping happens in my published file? I can't seem to find anyone with the same problem.

some0ne

unread,
Jul 15, 2014, 8:13:33 AM7/15/14
to gwd...@googlegroups.com
Me too. I don't want to try to upload this to Adwords until I'm sure it's going to properly clip or "hide" elements outside the main div's boundaries.

Anyone else know more about this?

Jaz

unread,
Jul 15, 2014, 7:20:27 PM7/15/14
to gwd...@googlegroups.com
Hi,

In the properties panel, change the Overflow dropdown from "visible" to "hidden".

Please let me know if you need anything more!

thx
jaz

Jasmine Rogers
Program Manager, GWD

sarahpa...@gmail.com

unread,
Jul 15, 2014, 7:41:32 PM7/15/14
to gwd...@googlegroups.com
That didn't work for me. The image outside of the page is still showing after publishing!

kris...@gmail.com

unread,
Jul 15, 2014, 11:00:55 PM7/15/14
to gwd...@googlegroups.com
That's not an option for me either, as I looked for it many times. The "overflow" property seems to be an option on every image, but not the main div.

But this is what worked for me:
I went to the "code view" tab, then scrolled down 'til I found the ".gwd-page-size" class, and added "overflow: hidden;" line after the "height: 250px;" attribute.

The whole class should look like this:
.gwd-page-size {
width: 300px;
height: 250px;
overflow: hidden;
}

NOW it works after being published!

sarahpnnz

unread,
Jul 16, 2014, 3:21:02 AM7/16/14
to gwd...@googlegroups.com
Great thanks! That's solved it for me too.

kris...@gmail.com

unread,
Jul 15, 2014, 10:59:55 PM7/15/14
to gwd...@googlegroups.com
That's not an option for me, as I looked for it many times. The "overflow" property seems to be an option on every image, but not the main div.

ferna...@gmail.com

unread,
Oct 23, 2015, 11:46:29 AM10/23/15
to Google Web Designer beta
Hi someOne,

Thanks for your answer.

I'm still seeing the issue on my banner after publish it.
The funny thing is that just the images on the right side are overflowing.
I change the code manually, but they are still appearing after publish.

If someone have a solution for this issue, please reply on this topic

Regards,

calicoc...@gmail.com

unread,
Oct 27, 2015, 8:13:40 AM10/27/15
to Google Web Designer beta
It's not working for me either. Any other solution?

Sukhbir Kaur

unread,
Oct 27, 2015, 12:36:33 PM10/27/15
to Google Web Designer beta

Can you please let us  know  which Ads Type (banner,Expandable or Interstitial)  you are seeing this issue ? 

Thanks
Sukhbir
(GWD Team)


calicoc...@gmail.com

unread,
Oct 27, 2015, 2:44:09 PM10/27/15
to Google Web Designer beta
I've been playing only with banners so far. That solution from some0ne works in viewport but when published, shows all assets around the banner.

Sukhbir Kaur

unread,
Oct 27, 2015, 3:25:12 PM10/27/15
to Google Web Designer beta


Can you please attach a sample file here . So we can take a look at it ? 


calicoc...@gmail.com

unread,
Oct 28, 2015, 7:02:59 AM10/28/15
to Google Web Designer beta
Thanks
Test_1_1.zip

Sukhbir Kaur

unread,
Oct 28, 2015, 12:12:45 PM10/28/15
to gwd...@googlegroups.com
Hi ,

Thanks for sending  us the files . It was really helpful to debug .

I see that you are using Match Viewport option while creating your banner files . 

This option is  used  only if you're creating an ad to use for several different sized devices. This sizes the banner to fit the mobile device, rather than limiting it to a specific size. 
When used with percentage-based positioning, this lets you create a single ad that can adjust to different screen sizes. In general, the more similar the screen sizes, the easier it is to create an ad that adjusts gracefully.















If you do not want this option so please remove  matchviewport  from the Code .

Steps : 

1. Open your file in GWD 

2.Switch to Code View 

3.Search for  matchviewport from code and removed as shown below in the image 

4. Preview / Publish  

Please note : If you still  want to keep  the matchviewport  option in the file .It will work fine ( i.e The images/ elements  outside the ad view port will not visible ) when you  publish the file to   DoubleClick  studio .


I hope this helps !


Thanks

Sukhbir

(GWD Team)

 

itre...@conversio.ca

unread,
Sep 12, 2017, 5:31:05 PM9/12/17
to Google Web Designer beta
Hi, I am currently having a problem with this issue. The solutions in the thread seem out of date? Please advise. Thanks!
skynet082017.zip

Sukhbir Kaur

unread,
Sep 13, 2017, 12:24:33 PM9/13/17
to Google Web Designer beta
Hi,

It looks like you have created this file as responsive ad i.e 100% width and height for the page properties.When you preview or open the published file in the local browser, the view port size is the browser window size so you will see the content according to the view port area. 

If you don't want the ad to be responsive then change the page width and height in Properties panel to 300 x 250 px.























I hope this helps!

Thanks
Sukhbir
(Google Web Designer Team)

Sukhbir Kaur

unread,
Sep 13, 2017, 4:32:44 PM9/13/17
to Google Web Designer beta


I have realized that and changed it in code view. Did not notice that we could also do it in design view. My goal in selecting responsive was to not have to create an ad for every format in AdWords, but rather create it once and simply modify the layout for the other ads, saving much time. My questions: is this what the responsive option is for? if not, how to proceed towards this goal? And if I had published locally and uploaded the ad, would it have been accepted by AdWords? Thanks!

Adding response  here : 

  
Browser Preview :  Resize your browser as per the ad size.In Responsive, When you preview or open the published file in the local browser, the view port size is the browser window size so you will see the content according to the view port area. 

Publish to Adwords :  If you create the responsive ad in Google Web Designer using the media rules, you can select the size of ad to publish to in the publish dialog. 
















Upload to Adwords : Upload to Adwords with different ad sizes since AdWords does not support Google Web Designer responsive ad yet.
GWD Help Topic:


YouTube tutorials:

Responsive Layout: Overview - https://youtu.be/pdEoLrGwMTY

Responsive Layout: Advanced Techniques - https://youtu.be/wk5QqUyvCso

Responsive Layout: Animation - https://youtu.be/pl5j3FfXdM4
 
Thanks
Sukhbir

Message has been deleted
Message has been deleted
Message has been deleted

robert...@yellow.com.mt

unread,
Sep 14, 2017, 5:04:34 AM9/14/17
to Google Web Designer beta
Hi, I am having the same problem, I have a 300px x 250px banner, and I am seeing images outside the banner when publishing Locally. The art board is in px not % , as I checked. This never happened with other banners I have created before. I also do not have a "match view port". Where can i find that? Is there any other way to fix this?
Thanks :) !

isapurp...@gmail.com

unread,
Feb 5, 2018, 8:50:34 PM2/5/18
to Google Web Designer beta
Thank you! This solved my problem :)

joe.sh...@craftedatom.com

unread,
Jun 26, 2018, 12:09:30 PM6/26/18
to Google Web Designer beta
Yes I'm exactly the same did you find a fix Robert?

If not, what's the latest on this??

Thanks

Kent

unread,
Jun 26, 2018, 12:29:49 PM6/26/18
to Google Web Designer beta
I believe the fix is to use px values in your document size. With document open, de-select everything, open the Properties panel and ensure Width & Height are set to px (not %). Now elements outside of the ad size will not show.

Hope that helps,

Kent
Google Web Designer team
Reply all
Reply to author
Forward
0 new messages