Different browsers may display your banner in slightly different ways. It can occur that your banner does not look identical across all browsers. If your banner looks off in some browsers, this probably concerns variations in text properties such as font size, letter spacing, and font weight.
Problem 1: text is being cut off vertically
Below, you will see an example of the same banner, displayed differently in Internet Explorer and Chrome. The text on the left is being cut off, as you can see in the banner title.
In different situations, different browsers can cause similar errors. It does not always have to be so that Chrome displays it correctly.
We can not control what browsers do, but we can help you with a fix that will solve most of these issues. After all, we prefer nice-looking and consistent banners, just like you!
The cause, in this case, is the use of a custom font.
The chances of your banner looking weird increase especially if you are making use of a custom font. When you use a custom font, it's important to use the correct file type. We currently support .ttf files in Bannerwise.
Still, even if you already have a .ttf file, it can cause errors because the font is perhaps not a web font. If you want to learn how to convert your font files to .ttf correctly, check out this article.
Problem 2: Uppercase letters convert to lowercase when publishing the ads.
If you have used a custom font to build an ad set and when you download the ads, font characters have changed from uppercase to lowercase, this can be due to the font you used.
Perhaps your custom font is not a web font yet. If you want to learn how to convert your font files to .ttf correctly, check out this article.
Once your font is webfont ready, simply upload the new font file and replace it in your ad. You can follow the steps here.
Problem 3: Text is being cut off horizontally
The same kind of visual problem can occur vertically. Sometimes the text box is too small to display all of your text, because of the difference in which browsers render the content. So even if everything looks perfect in one browser, suddenly the same text box is too small for another one.
In the example below, we can see that the text is filling the text box completely leaving no room between the text itself and the text box border. If the browser renders the font larger than originally intended, some text might be pushed to a different line, or get cut off completely.
The workaround, in this case, is to increase the text box size.
Using a simple trick, you can increase the size of text boxes to prevent text from being cut off in your banner in some browsers.
To be on the safe side when creating display banners, always add some extra space on the right side of your text box. That way, you leave space for the difference in rendering by a browser!
Problem 4: Line text breaking in a different way
In the example below, you can see that Google Chrome displays the text in the CTA correctly whereas Safari does not. The text element breaks the lines in a non-desired manner:
Sometimes, the line breaks are not correctly “defined/applied” in all browsers and we can manually fix this by editing the text element and press “SHIFT + ENTER” in our keyboard in the place where we want the line break, instead of just pressing “Enter”.
We can’t control browser rendering, but do find it important that banners look beautiful no matter how you view them. Using these tricks we hope you can prevent this common error from happening!
We hope the information in this article was useful to achieve your goal. If there is anything else we can help you with and you couldn't find it in our help center, don't hesitate to contact us by chat. We are always ready to help you.