Blurry images on non-retina screens

@Glenn_Ashcroft wrote:

Hello I need some help,

I have this site and on retina screens all the phone screen pics look sharp.

On non-retina screens however the phone screens in the first section at the top look fine, but in the sections below the text on the screens breaks up.

It is doing this in Chrome, Safari, Opera. But not in Firefox.

I have no idea why this is happening all the pics are the same size and they have all been marked as HiDPI.

Can anyone help please?

Here's a screengrab, the text on the image on the left with the dark background is more readable than the text on the right hand image.

Screen Shot 2016-01-14 at 15.33.09.png236x571 62.9 KB

Screen Shot 2016-01-14 at 15.33.15.png242x561 68 KB

----------

Here is my public share link: http://cvlt.fitness/

Here is another version, http://cvlt-website-v4.webflow.io/

I don’t know if this helps but I’ve cloned the site, re-imported the phone images (which are smaller) and turned off the interactions on three of the sections.

1. CVLT fitness the new social workout app

2. WORKOUTS

3. JOIN A GROUP

And on a non-retina screen the images are all clearer and you can read the text within the image.

I’ve left interactions on for the last section

1. LEADERBOARDS

And the text within the image is blocky.

Is there a problem with the interactions I have created?

Posts: 11

Participants: 3

Read full topic