Jump to content
kingsembassy

Mobile View Whitehouse Pro

Recommended Posts

kingsembassy    2
kingsembassy

We are having problems in viewing our blog in mobile devices (iphone/ipad). There is a black box appearing in all the blog posts. Any help you can give would be appreciated.

http://kingsembassy.com/eblog

Thanks!

  • Like 1

Share this post


Link to post
Share on other sites
catrina    103
catrina

Hello,

I saw your other thread addressing this topic. For future reference, please stick to a single topic per thread instead of reposting so that the communication can stay in one place.

I'm not sure where those black boxes could be coming from. Are these boxes appearing behind certain text areas?

  • Like 1

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
kingsembassy    2
kingsembassy

Sorry for the double post... I didn't see this thread until later and thought it was more important.

Here are a couple screen shots:

photo-3.jpg

photo-2.jpg

Any ideas? Thanks again for your help!

  • Like 1

Share this post


Link to post
Share on other sites
catrina    103
catrina

It seems to be happening with certain posts. If you activate a different theme, does the problem still occur?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
kingsembassy    2
kingsembassy

No, it doesn't occur with other themes.

Share this post


Link to post
Share on other sites
James B    436
James B

Looking at the screen shots and then looking at the code in those particular areas it looks like the mobile browser can't cope with the background image applied to the bottom of the posts. Its a semi-transparent png which rests on top of a white bg color, as shown in the code below.


.post {

    background: url("../images/post-bg.png") repeat-x scroll left bottom #FFFCFC;

    clear: both;

    overflow: hidden;

}


You could remove the background image by using css, this would resolve the problems on mobile devices but obviously you wouldn't have that nice bg effect where it fades to blue at the bottom of the posts. If you do want to remove it you can use the below css.

.post {

    background: none;

    clear: both;

    overflow: hidden;

}



Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

However, I've checked your site on my Iphone and I'm not seeing the same results as you are in the screen shots. Have you checked on other devices as well?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
kingsembassy    2
kingsembassy

James,

I did what you said and it brought results! Thank you. We are not seeing the problem anymore.

In response to your question, we had only tried it on iPhones and iPads (several different ones on different networks).

Thanks again for your help.

Catrina, thank you too.

Share this post


Link to post
Share on other sites
rodgerzeislernet    0
rodgerzeislernet

I had a similar issue when I was viewing my WhiteHousePro3 themed website http://www.everestgrp.com/ I did a little more research and found that IOS devices had an issue with semi-transparent png files that were only 1x1 pixels (see http://stackoverflow.com/questions/1374618/alpha-transparent-pngs-not-displaying-correctly-in-mobile-safari).  I used an image editor to expand post-bg.png from 1x268 to 2x268.  Using this expanded image, all my webpages look like they did before on desktop browsers and also look good on IOS device (Safari and Chrome) browsers.

Share this post


Link to post
Share on other sites
rodgerzeislernet    0
rodgerzeislernet

Does anyone know if this was an IOS5 vs IOS6 issue?  I can't find anyone with an IOS5 device to test this theory on.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi, I think it was an error which only appeared on IOS6. I'm on IOS 4.3.5 (i can never be bothered to upgrade), I checked your site (display's mobile version first but option to switch off at the bottom ) and the normal site is displaying fine, no black areas.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rodgerzeislernet    0
rodgerzeislernet

I got ahold of an iPad (original) with IOS 5.1 on it.  I unfixed my website and it was still fine (no black boxes).  So the issue became a problem between IOS 5.1 -> IOS 6.0.

 

I walked thru the office and asked about 20 people if they had the old version and all of them had upgraded to IOS 6.  The iPad with IOS 5.1 came from somebodies home that had battery issues when they upgraded their iPhone to IOS 6 so they were holding off...lucky for me!

Edited by rodgerzeislernet (see edit history)

Share this post


Link to post
Share on other sites
junico    0
junico

Hi From France !

I ve met this issue too ...

Three awful black blocks on each page of www.whereelse.fr in using iphone or ipad under ios5 & 6

don't have strong skills to manipulate css files

who can help me ;)

 

Big thx

 

Gilles

Share this post


Link to post
Share on other sites
blogbloke    0
blogbloke

Resaving "post-bg.png" in Photoshop with Interlaced turned off fixed it for me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×