Images outside of page still showing in published file?

[sarahpnnz]

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]

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]

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]

That didn't work for me. The image outside of the page is still showing after publishing!

[kris...@gmail.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]

Great thanks! That's solved it for me too.

[kris...@gmail.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]

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]

It's not working for me either. Any other solution?

[Sukhbir Kaur]

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]

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]

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

[calicoc...@gmail.com]

Thanks

[Sukhbir Kaur]

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]

Hi, I am currently having a problem with this issue. The solutions in the thread seem out of date? Please advise. Thanks!

[Sukhbir Kaur]

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]

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:

https://support.google.com/webdesigner/answer/7002913?hl=en&ref_topic=7003209

Breakpoints : https://support.google.com/webdesigner/answer/7002914?hl=en&ref_topic=7003209

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

[robert...@yellow.com.mt]

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]

Thank you! This solved my problem :)

[joe.sh...@craftedatom.com]

Yes I'm exactly the same did you find a fix Robert?

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

Thanks

[Kent]

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