-
AuthorPosts
-
March 27, 2014 at 12:22 am #243589
Hello,
This is a topic I started on Themeforest and was asked to open a thread here.
I have problems on mobile with these 2 websites:
http://www.snnlaw.co.il/
http://www.ranibleierstudio.co.il/As you’ll see, when going mobile on these 2 sites, the buttons and links on the homepage don’t work. Some of them do, and some don’t. I tried it on iPad, iPhone and Galaxy S3. It’s a big problem for me since the mobile part is very important for me. I have been using the AVIA layout builder.
This is the quick css I put in the enfold settings:
h1, h2, h3, h4, h5, h6, p, body, #socket .copyright, #top .footer_color .input-text, #top .footer_color input[type=’text’], #top .footer_color input[type=’input’], #top .footer_color input[type=’password’], #top .footer_color input[type=’email’], #top .footer_color input[type=’number’], #top .footer_color input[type=’url’], #top .footer_color input[type=’tel’], #top .footer_color input[type=’search’], #top .footer_color textarea, #top .footer_color select .main_menu ul:first-child > li > a{
font-family: ‘atlas’, sans-serif;
font-weight: 400;
}h1{
font-size:60px;
line-height: 66px;
}h2{
font-size:40px;
line-height: 46px;
}h3{
font-size:28px;
line-height: 34px;
}p{
font-size:19px;
line-height: 25px;
}#header_main .container, .main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
font-family: atlas;
font-weight: 400;
font-size: 18px;
}#socket .copyright{
font-size:14px;
line-height: 18px;
}#top .footer_color .input-text, #top .footer_color input[type=’text’], #top .footer_color input[type=’input’], #top .footer_color input[type=’password’], #top .footer_color input[type=’email’], #top .footer_color input[type=’number’], #top .footer_color input[type=’url’], #top .footer_color input[type=’tel’], #top .footer_color input[type=’search’], #top .footer_color textarea, #top .footer_color select{
font-size:17px;
line-height: 18px;
width: 75%;
}#top select{
background-position: 12px center;
margin-top: 10px;
}#top .socket_color .input-text, #top .socket_color input[type=’text’], #top .socket_color input[type=’input’], #top .socket_color input[type=’password’], #top .socket_color input[type=’email’], #top .socket_color input[type=’number’], #top .socket_color input[type=’url’], #top .socket_color input[type=’tel’], #top .socket_color input[type=’search’], #top .socket_color textarea, #top .socket_color select{
width: 100%;
}#top h3 a {
font-size: 19px;
}.rani-about-small{
display:none;
}#top .main_menu .menu li ul a {
width: 100%;
height: auto;
float: left;
text-align: right;
line-height: 23px;
padding: 8px 15px;
font-size: 16px !important;
min-height: 23px;
max-width: none;
text-decoration: none;
}.main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
padding-right: 20px;
}.avia-button.avia-size-medium {
font-size: 17px !important;
font-family: atlas !important;
color:#000 !important
}And this is what I put in the custom.css file:
@font-face{
font-family:’atlas’;
font-weight:400; /*(regular)*/
font-style: normal;
src: url(‘atlas-aaa-400.eot’);
src: url(‘atlas-aaa-400.eot?#iefix’) format(’embedded-opentype’),
url(‘atlas-aaa-400.woff’) format(‘woff’),
url(‘atlas-aaa-400.ttf’) format(‘truetype’);
}#top textarea {
width: 100%;
height: 140px;
}
#top .avia-menu-fx {
height: 5px;
}
#top .scroll-down-link {
height: 65px;
width: 100px;
margin: 0px 0 0 -40px;
line-height: 70px;
position: absolute;
left: 50%;
bottom: -1px;
color: #000;
background: #AAA;
background: #50d1f5;
text-align: center;
font-size: 40px;
z-index: 100;
text-decoration: none;
border-top-left-radius: 223px;
border-top-right-radius: 223px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}Plus these are the plugins I use:
RTL Tester
Limit Login Attempts
Contact Form 7
Wordpress ImporterThanks for your help.
YakiMarch 28, 2014 at 1:44 am #244149Hey YakiPasandi!
Please try adding following code to Quick CSS in Enfold theme options under Styling tab
.avia_mobile #top .av-parallax-section{z-index: 0;}
Best regards,
YigitMarch 28, 2014 at 9:15 am #244254Hi Yigit!
Thank you for your response. Unfortunately, it’s not working… I noticed the problem is when I have links (it doesn’t matter if it’s text links or buttons) on a color section with background photo set to FIXED (not parallax). If you’ll take a look at http://www.snnlaw.co.il, at the homepage under the photo of the person are 4 black and white pictures, who also have links assigned to them which doesn’t work on mobile… But if you scroll down towards the end there are 2 gold buttons that DO work. So it’s weird…
Would you like me to add you as a user to the admin options so you could have a better look?Thanks!
YakiPasandiMarch 28, 2014 at 1:37 pm #244335Hi!
Thank you for the link and for explaining the issue. I’m sorry but we’re not entirely sure what is causing the problem. A z-index fix usually take care of this kind of issue where a layer is being covered by another element’s overflow. If you don’t mind, please add this one on Quick CSS, see if the link work on mobile device:
.image-overlay { display: none !important; }
I also noticed that you only have 64M of memory limit which might cause some problems when editing the Advance Layout Builder and the Layer Slider. This is usually due to the builder timing out because of a memory limit in your server environment. The first thing you can do to remedy this is to enter the following lines in your wp-config.php file at the root of your installation:
define( 'WP_MEMORY_LIMIT', '128M' ); define( 'WP_MAX_MEMORY_LIMIT', '256M' );
Refer to this link for more info: http://dailyblogging.org/wordpress/increase-wordpress-memory-limit/
Best regards,
IsmaelMarch 28, 2014 at 4:35 pm #244455This reply has been marked as private.April 1, 2014 at 10:08 pm #246273Hi!
Looking at and testing the demo and my personal dev server I don’t have any issues clicking on the links or images.
Can you describe in a bit more detail or with a specific example exactly what happens and what you expect to happen on the demo/your site? Maybe we are just misunderstanding what the issue is or a misinterpretation of what is expected.
Cheers!
DevinApril 2, 2014 at 12:00 am #246301Hi Devin,
Thanks for your comment. I will try and explain again with 2 live examples:
General comment:
For our example, I only speak about the homepages. First open them on your desktop browser, and press the links in the Homepage. in snnlaw.co.il for example, scroll down and press the 4 black and white pics on the gavel background (or the text below them). You will see that on desktop browser once you press these pictures or text in that section, they will lead you to inner pages of the site. Now open the same site on touch device (ipad, mobile phone – galaxy S3/S4 or iphone) and try clicking these picturesor text again – They will not work.Same goes for the blue buttons on this site:
http://www.ranibleierstudio.co.il
Scroll down and you will see 5 icons with blue buttons below them – these buttons don’t work on touch screens.Same goes for your demo. Try opening your demo on touch device, and in your demo you have a portfolio section (SHOWCASING YOUR WORK HAS NEVER BEEN MORE FUN) try pressing one of the photos (say “Single Portfolio: 2/3 Slider”) – Won’t work on touch device, but will work on desktop browser.
Even if you use a responsive emulator on your desktop browser it will work, BUT on real touch devices it doesn’t.
Hope I was clear…
Thank you!
April 2, 2014 at 9:41 am #246431Hi!
Thank you for the explanation. If you don’t mind removing the parallax effect on iPhone or iPad, add this on Quick CSS or custom.css:
@media all and (max-width: 989px) { .avia-section { background-attachment: scroll !important; } }
We’ll try to fix the parallax issue on the next theme release.
Regards,
IsmaelApril 2, 2014 at 7:03 pm #246683Hello,
Thank you for your answer. Well.. It didn’t work with the code you sent me, but once I change FIXED to SCROLL in the layout builder, it worked fine. So now we know that the problem is links on touch devices. won’t work if they’re on parallax background. I hope your next update will fix it. Thank for all the help.
April 3, 2014 at 7:17 am #246889 -
AuthorPosts
- The topic ‘Mobile Problem’ is closed to new replies.