iPhone Browsing

[Derek Cassadine]

Bill,

It’s me again. I am trying to view my website on an iPhone. The website does not show up well. There is no background image, it’s just the logo, the welcome page, and the hours/location widget.

Is there a way to make the Foxy theme iPhone friendly?

[Bill Robbins]

Derek,

The background image is hidden by default on a smartphone sized screen. The odd screen sizes tended to distort the full-screen background images which is why we choose to go that route. If you’d like to add a background that only appears on the mobile version, let me know and I’ll send you instructions on how to do that.

There is a mobile navigation menu. You can add your current navigation menu to that spot in the menu builder (Appearance > Menu). You can also create a mobile specific one too and use it instead.

Bill

[Derek Cassadine]

Bill,

I added the mobile version. Thank you.

Can you send me the instructions for the background?

[Tarek Khalifa]

Hi Bill,

I’d be interested in getting the instruction as well to add a mobile image to each screen

A question though, how would that impact the default rotating backgrounds?

Thanks.

[Bill Robbins]

I get this to you guys this weekend. I need to do just a bit more testing with it to make sure it works as it should.

Thanks,
Bill

[Bill Robbins]

Here’s the solution for a background that will be visible to screen sizes smaller than an iPad in portrait orientation. This will not affect the images or slideshow on larger screens.

1. Find an image that you’d like to use. It would be best to have the image repeat. If you need help finding one, a great site to look at is Subtle Textures.
2. Go to the media section of your WordPress control panel and select “Add New. Then upload your new background image.
3. Once the upload finishes, WordPress will give you a URL to your image. Copy that URL.
4. Next go to the theme options page and select the “Styling” tab.
5. At the top of the styling tab, select “yes” to include custom styling.
6. Scroll down to the very bottom until you see a box labeled “Custom CSS.
7. Paste this into that box:

8. Replace the “http://www.yoursite.com/image.jpg” above with the URL to your image from earlier.
9. Update your settings.

That will give a custom background image only on smartphone sized devices.

If you have questions or trouble, just let me know.

[Author]

Posts