Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
srouse13

Border and Background in ad preview

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I had a couples questions regarding border and background on html ads. I have a border on the entire body of my ad that has a 3px width and I also do not have a background color set, so it's technically transparent. The right and bottom sides of my border appear to be getting cut off in the preview of Adwords. When I uploaded to another ad server that has a light grey background in their ad preview, my ad background was that light grey instead of white.

 

Is good practice to only set a border of 1px or less? Does anything above 1px border width get cut off when actually set live? Also, are ads typically served over a white background, is the transparent background something I should be concerned about?

 

Thanks for any insight anyone has!

 

 

adwords-border-cutoff.jpg

transparent-bg.jpg

Link to comment
Share on other sites

Hi @srouse13,

 

If you use GSAP, then this variant is also suitable.

 

See the Pen zQVQaV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 1
Link to comment
Share on other sites

Just use box-sizing: border-box; to keep the borders within the boundaries of the main ad container.

 

Regarding your second question, ads can be served with transparent backgrounds, so it's always good to have a background color or image, even if you want the background to be plain white.

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thanks for the confirmation on the transparent background, that makes sense and I'll be sure to set a background color going forward. 

 

Also, using border-box makes a ton of sense, can't believe I missed that. I ended up using a div within my body and accounting for my border width when creating the size, which also worked. In the future, I'll just be sure to get my resets like border-box in order before I get going on my ad.

 

Thanks!

Link to comment
Share on other sites

Make sure that if the border is 1px and using box-sizing: content-box; you are accounting for the extra pixels in the border.

So if the ad is 300x250 then the container/wrapper div will have width: 298px; and height:248px;

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×