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)
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?
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.
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
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 :)
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/...)
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