1. 

   Chris Caldwell
   

   offline

   Member

   Hello,
   I seem to have a blurry background image when I view my site on an iPhone 12.

   http://phoenixtreeremoval.com/

   About 7 years ago, I had a similar problem, and Al sent me this css to address a bug in IOS. Is this still valid today, or what else can I so that the background image does not appear so blurry? Thank you::

   /* Addresses bug in iOS*/
   @media only screen and (device-width: 320px), (device-width: 768px) {
   .bg-fixed {
   -webkit-background-size: 100%;
   background-attachment: scroll;
   }
   }

   /* Tablet Media Query */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
   bg-fixed {
   -webkit-background-size: 100%;
   background-attachment: scroll;
   }
   }

   Posted 2 weeks ago
2. 

   Chris Caldwell
   

   offline

   Member

   Ps. I still need to figure out these media queries. It's always an issue when viewing a site on mobile, where a client asks for bigger font when he holds his phone vertically. In addition to the font being too small, there are gaps that are too big in between the middle three photo/columns.

   So I also have in my css:

   @media only screen and (min-width: 0px) and (max-width: 768px) {
   body {font-size: 110%;}
   html {-webkit-text-size-adjust: 100%;}
   .p7HMY .hmy-section .p7HMY .hmy-section {flex-basis: 100% !important;}
   .p7HMY.hmy-legacy .hmy-section .p7HMY .hmy-section {float: none !important; width: 100% !important;}
   }
   @media only screen and (min-width: 0px) and (max-width: 600px) {
   body {font-size: 110%;}
   .p7HMY .hmy-section {flex-basis: 100% !important;}
   .p7HMY .hmy-section .hmy-content-wrapper {border-radius: 0px !important; border-left: none !important; border-right: none !important;}
   .p7HMY.hmy-legacy .hmy-section {float: none !important; width: 100% !important;}
   }

   I increased font size to 110%, but I don't see any changes in the font size. I'm wondering if there's a cache issue. I used to be able to make changes on the fly, upload via FTP, refresh browser, and see my changes reflected instantly. Now, it's like an hour later. Weird and frustrating for a designer. I typically use Safari on a Mac and my phone, but also use chrome a lot, too and the same thing with changes not selecting for an hour.

   Thank you,
   Chris

   Posted 2 weeks ago
3. 

   Gerry
   

   offline

   PVII Team

   Is this still valid today

   No, current iPhones do not need the hack, and it would not affect blurriness of the image.

   In checking your page I don't see any blurriness on my iPhone (XR), or in any of the mobile emulators.

   Posted 2 weeks ago
4. 

   Gerry
   

   offline

   PVII Team

   I increased font size to 110%, but I don't see any changes in the font size.

   It's not a cache issue, you need to add the !important declaration, like this:

   body {font-size: 110% !important;}

   This tells the browser to over-ride the other font-size rules.

   Posted 2 weeks ago
5. 

   Chris Caldwell
   

   offline

   Member

   Hi Gerry,
   Thank you for the help.

   Another last minute tweak I need to make, site is now uploaded here: https://phoenixtreeremoval.com

   The masthead has been set to transparent, and parts of the background image display well in a laptop or desktop, but on the iPhone (in my case a mini 12) I notice that none of the image is visible at all. I mean, it's there, but, the area of the picture displayed in my phone is blank so it appears nothing is there. I wanted to at least get some of the buildings or something to be visible on the phone to give the page texture. Is there a way to get the image to scale differently on a phone? Hope that makes sense.

   Thanks again,
   Chris

   Posted 2 weeks ago
6. 

   Gerry
   

   offline

   PVII Team

   You could setting the background position for smaller screens to left instead of the default center. Add this style rule:

   @media only screen and (min-width: 0px) and (max-width: 768px) {
   body.p7vibes-05 {
   background-position: left !important;
   }
   }

   Posted 2 weeks ago
7. 

   Chris Caldwell
   

   offline

   Member

   Thanks again, Gerry.

   I placed the media query in the HMY style sheet, but still nothing in my image is visible in the top section on the website on the index.html page. But, a little bit of the building peeks through on the contact page, so I'm sure it's just something about this image that I'm using and perhaps the length of the index.html page.

   Thank you.
   Chris

   Posted 2 weeks ago

RSS feed for this topic

Reply

You must log in to post.