Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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 Importer

    Thanks for your help.
    Yaki

    #244149

    Hey 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,
    Yigit

    #244254

    Hi 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!
    YakiPasandi

    #244335

    Hi!

    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,
    Ismael

    #244455
    This reply has been marked as private.
    #246273

    Hi!

    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!
    Devin

    #246301

    Hi 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!

    #246431

    Hi!

    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,
    Ismael

    #246683

    Hello,

    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.

    #246889

    Hey!

    This topic is noted and we’re still not sure why the parallax effect is not working for touch devices. Thank you for explaining the issue.

    Cheers!
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Mobile Problem’ is closed to new replies.