Pixelated Image on iPad. Help?

  • Resolved dsb0328

    (@dsb0328)


    10 years, 5 months ago

    Hello. Not even sure if this is where I should ask this question, but I was wondering if someone could help me out with this. I have an image placed on my 1 page website that looks fine on every computer and device I’ve tried it on (MacPro w/ 24″ monitor OS 10.6.8, older 13.3″ Macbook OS 10.6.8, 15.4″ Asus laptop Windows 10, & Galaxy S3 Phone) except an iPad2 with iOS 8.1.1. The only thing I thought that would cause this is possibly the media queries to reduce the size of the image at certain screen sizes. So I disabled them and it still looked horrible. So I enabled them again. Everything else, (text & other images) look just fine. I am using the GeneratePress theme if that makes a difference. Below are all the lines of custom CSS that I am using, which isn’t much. (The image that looks bad is in the “iPhone with Game” section of my css.)

    Hopefully someone has dealt with this before. Thanks in advance if you can help me.

    /* Text Properties */

	p {
		font-size: 36pt;
		line-height: 100%;
	}

	h1 {
		line-height: 100%;
	}

	@media only screen and (max-width : 1370px) {

		p {
			font-size:36px;
			line-height: 120%;
		}

		h1 {
			font-size:70px;
		}
	}

	@media only screen and (max-width : 768px) {

		p {
			font-size:36px;
			line-height: 120%;
		}

		h1 {
			font-size:70px;
		}
	}

/* Header */

	.main-navigation {
		margin-top: 10px;
	}

/* iPhone with Game */

	#generate-section-2 {
		margin-top: -160px;
	}

	@media only screen and (max-width : 1370px) {

		#generate-section-2 > div > p > img {
			max-width: 50%;
			height:auto;
			margin-top: -90px;
		}
	}

	@media only screen and (max-width : 1000px) {

		#generate-section-2 {
			margin-top: 0px;
		}

		#generate-section-2 > div > p > img {
			max-width: 100%;
			height:auto;
			margin-top: 0px;
		}
	}

/* Footer Site Info */

	.site-info {
		display: none;
	}
Viewing 1 replies (of 1 total)
  • Thread Starter dsb0328

    (@dsb0328)

    10 years, 5 months ago

    Hey everyone. After a lot of searching and trial and error, I have found the solution to this. I found a site that explained it perfectly and the 1 change that I made worked. I went into the settings > media and changed everything to 0. Here are the quick directions from the site:

    Stop using image size settings in WordPress to force yourself (or your client) to upload correctly sized images. Calculate the sizes you want your content area images to scale at individually and manually. This means you should not be trying to use an image that is “medium” size or “large size” in WordPress anymore. To disable this:

Go to Settings > Media
Where you see the image size settings, turn all the values to zeros.
Click to “Save Changes.”

    Here’s a link to the site for all that they talk about.

    Hope this helps someone in the future.

Viewing 1 replies (of 1 total)

The topic ‘Pixelated Image on iPad. Help?’ is closed to new replies.