My friend just looked at this site on his Iphone. Says the menu is moving down into images and where the images are there are just black space. Any ideas on what is causing this and how to fix it?
Thank You
Problem with site on Iphone
10 posts from 2 voices- Started 6 months ago by elames
- Latest reply from elames
- This topic is closed
- This topic is resolved
-
Devin
ModeratorHey elames,
Do you happen to know which version of iOS it is? I'm afraid none of the support staff actually has an iPhone as far as I know so we have to leave these kinds of issues for Kriesi to tackle with theme updates unless we can replicate the issue or know of a fix specifically.
As much information as you can give on it and the circumstances it takes to get it to happen the better.
Regards,
Devin
Posted 6 months ago # -
elames
MemberI don't have an i phone either. I will ask him details tomorrow. I did look on my tablet and the contact us does move down into the slider image when the tablet is in vertical position. Do you think this has to do with the amount of padding between the navigation links? I needed to keep them this way as my friend wants the navigation to be spaced evenly across the site.
I know this is not flash but j query and should normally show up on the iphone. Will check more.
thanksPosted 6 months ago # -
elames
MemberI don't know if this will help or not. A friend has a new Iphone 4s which was just upgraded to the new OS. this is what she reports to me If you can make sense of it. Look at the site on the computer and compare with what she is seeing on the i phone. Doesn't sound pretty:-(
It is in the right order, but have no idea how it actually looks.
_______________________When it came up"
box w/ Call Fairfax and page at: with symbols under the text for rss, fb, etc
Then text box w/ logo
then text box w/ Select a page (last 2 are on a black box and under the black area is a slide show of nice photos
Move the screen up & I have the welcome text and there is a pointing finger imposed over the last sentence (and Page take to a good home.)
Then text boxes saying Consultations followed by Estate Sales and Appraisals
Footer:
A gray area with Join our Mailing List and email address: entry box / Join Now
PAGES followed with the 2 badges
Posted 6 months ago # -
elames
MemberFOLLOW UP.
Look at this link and you will see the problem : http://fairfaxandpage.com/iphone.pngThe large black area is the issue.
Everything else now besides that is acceptable.
Any suggestions as to how to get rid of the black area and still have a black navigation which my client wants???Thanks for putting up with me :-)
Posted 6 months ago # -
Devin
ModeratorHi elames,
This is caused by the following css in your Quick CSS:
#header .container { min-height: 80px; padding-top: 0px; padding-bottom: 35px !important; }The padding-bottom is forced to be there even at the smaller mobile size. This is actually happening on any platform that uses the mobile size and you can test it by adjusting your browser width.
If you add the following in your Quick CSS it should fix the issue (and remove the other padding from the above):
#header .logo { padding-bottom: 29px; }Just be careful with using !important as it means css further down that may need to take effect to make the theme work properly gets ignored.
Regards,
Devin
Posted 6 months ago # -
elames
Memberthanks Devin, however, I still have the issue with the logo image not covering the black header area. My client want that logo centered with the striped area extending all the way across the screen. I expect it is something in my style settings which i used to force it to do that which is causing the problem. Any ideas of what I could do to fix this?
thank you as always!
Posted 6 months ago # -
Devin
ModeratorHi elames,
You need to add css to the media queries for the new header image size. So for each of the various sizes you can adjust your css to make the image fit perfectly. Here is a code example without any css:
/* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}Just be aware of the way the css and theme already adjust css values based on the queries and test your css by adjusting the browser width as you are setting it all up.
Regards,
Devin
Posted 6 months ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
