Jump to content
srouse13

Border and Background in ad preview

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.