Different browsers may display your banner in slightly different ways. It can occur that your banner doesn't 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 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 of text elements being cut off vertically 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.
💡 To resolve this, ensure that the font you're using is a Web Font. You can successfully convert your font files following the steps in this article. Once your font are web font ready, replace them in your ads.
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.
💡 To resolve this, ensure that the font you're using is a Web Font. You can successfully convert your font files following the steps in this article. Once your font are web font ready, replace them in your ads.
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.
💡 To resolve this, increase the text box size and leave extra space to ensure the text will fit completely. As best practise, always add some extra space on the right side of your text box when building ads. 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. To resolve this, edit the text element and press “SHIFT + ENTER” in our keyboard in the place where we want the line break, instead of just pressing “Enter”.
Problem 5: Text elements don't display on phone devices.
Ever experienced that your ad design looks fine when you preview it on a computer but text elements "disappear" if you preview the ad set on a phone device? This happens when the custom font used for your text elements is not web font ready.
💡 To resolve this, ensure that the font you're using is a Web Font. You can successfully convert your font files following the steps in this article. Once your font are web font ready, replace them in your ads.
Problem 6: Scale to fit font selection is too big for the container.
If you are using scale to fit feature in your ads, it can be that the minimum and maximum font sizes selected are too big for the space given to the container. Have a look at the image below, the fonts selected is cut off:
💡 To resolve this, edit your ads and set up smaller sizes to ensure the complete text will fit in the given space. Once this is done, publish again your ads to get the updated version of it.
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.