Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

My mobile and iPad don't work correctly. WordPress

My website (hermanfurniture.com) is a Furniture store website. I purchased the Core theme from themeforest. This theme works perfectly for the desktop.

But the mobile (iPhone) and the iPad is slight wrong. For the mobile, the logo is too big and the menu drop-down is hidden, cos the iPhone is too small. portrait and landscape cannot be used.

And the iPad, the portrait oriention is wrong. The menu cannot be clicked. but the landscape is fine.

How do you correct the mobile and iPad theme, without touched the desktop theme??

Answers (7)

2012-08-08

Arnav Joy answers:

try this plugin

http://wordpress.org/extend/plugins/wptouch/

2012-08-08

Michael Caputo answers:

Yeah, i see what you're saying.

A suggestionI could make (for iPhone - i don't have my ipad with me right now), is move the drop down menu more to the top of the screen. That would help?

I could do that for you if youd like.

in your grid.css, on line 178, put:

position: absolute;
top: 0;
right: 10px;


so it would be:

#menu_border_wrapper select {
display: inline-block;
float: right;
margin-top: 10px;
position: absolute;
top: 0;
right: 10px;
}


Michael Caputo comments:

I would also suggest adding
<code>margin-top:30px;<code>

to line 112 of grid.css


kidd comments:

Hi,

Thanks for the help!! :) I tried your method but doesn't work :( Cos my mobile theme logo is too big, anyway to upload another logo, much smaller one, without affecting my desktop theme?? and i tried your method, position: absolute; top: 0; right: 10px; no change in my website :((

Please advice :((


Michael Caputo comments:

Try adding:


@media only screen
and (min-width : 1224px) {

a#custom_logo img{display:none;}
a#custom_logo{background:url('URL TO SMALLER LOGO') no-repeat 50% 50%;width: WIDTH OF IMAGE;height: HEIGHT OF IMAGE;display:block;text-indent:-9999px;}

}


To the bottom of your screen.css file.

Please make sure you add in the URL to your smaller logo and the logo image width and height.


Michael Caputo comments:

Sorry, disregard the previous css, use this:


@media only screen and (max-width : 1224px) {
a#custom_logo img{display:none;}
a#custom_logo{background:url('URL TO SMALLER LOGO') no-repeat 50% 50%;width: WIDTH OF IMAGE;height: HEIGHT OF IMAGE;display:block;text-indent:-9999px;}
}


kidd comments:

Hi, Can you see if It is correct??

@media only screen and (max-width : 1224px) {
a#custom_logo img{display:none;}
a#custom_logo{background:url('http://hermanfurniture.com/Hermanright(smaller)mobile.png') no-repeat 50% 50%;width: 20px;height: 20px;display:block;text-indent:-9999px;}
}

There is no difference on my mobile.


kidd comments:

My website (hermanfurniture.com) is a Furniture store website. I purchased the Core theme from themeforest. This theme works perfectly for the desktop.

But the mobile (iPhone) and the iPad is slight wrong. For the mobile, the logo is too big and the menu drop-down is hidden, cos the iPhone is too small. portrait and landscape cannot be used.

And the iPad, the portrait oriention is wrong. The menu cannot be clicked. but the landscape is fine.

How do you correct the mobile and iPad theme, without touched the desktop theme??

You can do this for me? and how much?

2012-08-08

Asad Iqbal answers:

Please follow this article:

http://wpwidgets.net/11-ways-to-create-a-mobile-friendly-wordpress-site/

If you think you need more help then let me know.

2012-08-08

Ibrahim Quayum answers:

You have to purchases a theme with mobile version or make a only mobile version for your theme. No plugin can solve it because it's not a blog , it's a business website. Thank You

2012-08-08

Daniel Yoen answers:

You need responsive layout,

http://twitter.github.com/bootstrap/

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

http://www.shifnet.com/premium/50-fresh-responsive-themes-to-optimizing-your-web-performance/

hope this help :)

2012-08-08

Dbranes answers:

if you use a mobile detector plugin (here are for example two)

[[LINK href="http://wordpress.org/extend/plugins/any-mobile-theme-switcher/"]]http://wordpress.org/extend/plugins/any-mobile-theme-switcher/[[/LINK]]

[[LINK href="http://wordpress.org/extend/plugins/wp-mobile-detector/"]]http://wordpress.org/extend/plugins/wp-mobile-detector/[[/LINK]]

then you can easily add a different Wordpress theme for the mobile devices (iphone/ipad/...)

2012-08-09

Sabby Sam answers:

Hi,
use this code,

<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad) {
?>
<style> your style code.</style>
<?php
}
?>

for more information you can visit this site :

http://davidwalsh.name/detect-ipad

Nice website to detect all iphones, ipad etc.
I have integrated with many site, for instance you can see this site working in on all browser.
cleanenergyblog.eversheds.com
see this site on ie6,ie7,ie8,ie9 safari, ipad, iphones etc.

Check and try from the above link and implement.
Thank you


kidd comments:

Hi, where to paste this code?


Sabby Sam comments:

In header,

before </head> closing part

check this link http://davidwalsh.name/detect-ipad


kidd comments:

My website (hermanfurniture.com) is a Furniture store website. I purchased the Core theme from themeforest. This theme works perfectly for the desktop.

But the mobile (iPhone) and the iPad is slight wrong. For the mobile, the logo is too big and the menu drop-down is hidden, cos the iPhone is too small. portrait and landscape cannot be used.

And the iPad, the portrait oriention is wrong. The menu cannot be clicked. but the landscape is fine.

How do you correct the mobile and iPad theme, without touched the desktop theme??

You can do this for me? and how much?


Sabby Sam comments:

Hi,
Kindly email me on [email protected] or skype me at sabiresm.

Will help you.
Thank you