Tesla Theme - mobil layout blurry

Hi there,

I am using the Tesla Theme.


It looks ok when I view it on a PC, when I look on the mobile version the logo and font is blurry.

Googly says it is mobile friendly.

Has anyone an idea how to improve the image quality for mobile layouts ?

Thanks for your help.

The image gets scaled down to fit the space available. You can use a smaller image, so that no scaling occurs. If the browser scales the image though some slight blurring is going to be expected, as the browser is proportionately scaling the image and is not going to be able to get things as pixel-perfect as you have designed them when it is scaled.

Hi Adam, thank you for your help.

The theme comes with 20 different background styles. Each style constist 3 different pictures.
Size 2000x1500 / 1024x768 / 480x360
I replaced all 3 files with my picture.

You suggested to add a smaller image. Do you mean instead of the 2000x1500?

maybe it would be better to raise the DPI ? That could be a reason why iphoen 7Plus look is such bad, domnt you think?

The question might be a bit stupid to you, sorry I have no technical background :wink:

I’d assumed you were talking about the logo. You’re referring to the banner image being blurry?

The dpi on your image should be 72dpi.

Also are you using the free Tesla theme that comes with RW or the Tesla Pro theme I sell? The later has a built in mechanism for adding banners to the theme.

Hi, I am using the free version that is part of RW edition 6

If you open my page on a mobile device vs on a PC/MAC you can easily see what I mean.

It looks like this: (left iphone / right mac)

The free version does not have the ability to have custom banners without modifying the theme internally. I suspect that is what you’re doing to add images?

The free version of the theme belongs to Realmac Software. That being said, if you send me a copy of your image files (the files you’ve replaced the internal banner image files with) I will have a look since I’m already deep down this rabbit hole. :wink:

You can email me a ZIP file containing the images to adam at elixirgraphics dot com

1 Like

Just replied to your email, but wanted to post here as well –

The smallest image you have created has the logo very small in the middle of the background of black. You’ll want to make that bigger when creating that image. The theme has to scale and crop the image because the banner takes up the entirety of the screen. In all honesty the banner is used as a backdrop in this theme because of this. It wasn’t intended to hold a logo or text.

You would be best off just placing your logo image and text (as one png image) into the RW Logo drop zone and using a plain black background image as the banner. This will work better for what you’re trying to do.