Okay
  Public Ticket #2284784
+ All Projects shown on mobile
Closed

Comments

  • forceWERK started the conversation

    Hi guys,

    a) I'd like to have the + ALL PROJECTS button all the time, even on mobile devices. Unfortunately I can't find the CSS break point respectively CSS class, where it's being set to visible: none; Could you please point that out to me?

    b) I'm aware that the + ALL PROJECTS overview probably doesn't work on touch/mobile devices, since it's showing the featured images only when hovering the mouse cursor. Hence, my next question: Can I replace the target of the link to https://www.forcewerk.com/large-carousel/ 

    I would then dynamically toggle the target between desktop/mobile with the wp_is_mobile(); function. Could you please point out the PHP code, where I can modify the target of the + ALL PROJECTS link?

    Thanks a million!

    Cheers, Michael

  •  1,809
    Support replied

    Hi,

    a) you can try

    @media only screen and (max-width: 1024px){
        .header-middle {
           display: block;
           padding-left: 150px;
        }

    }

    in customizer -> additional CSS

    b) the click event is handled in /js/scripts.js

    $('.quickmenu, #close-quickmenu').on('click', function() {

    ...

    }

    function QuickMenu() so you may try something like 

    isDevice = navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i);


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • forceWERK replied

    Hi there,

    a) I've added the CSS, the +ALL PROJECTS link is shown on the mobile version. However, when I click it, the background fades to grey but no other portfolio elements are being shown.

    b) Thanks for the code, unfortunately I'm a bit lost. Could you please show me, how to link the +ALL PROJECTS button (which is now shown, thanks to point a) on the MOBILE VERSION of the page to https://www.forcewerk.com/creative-portfolio/ This one works the best on mobile.

    Thanks a million!
    Michael

  •  1,809
    Support replied

    1. try adding

    @media only screen and (max-width: 1024px){
    #quickmenu {
        display: block;
    }

    }

    in customizer -> additional CSS

    2. 

    isDevice = navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i);

    if( isDevice ){

        window.location.href = 'https://www.forcewerk.com/creative-portfolio/';

    }

    add this code inside 

    $('.quickmenu, #close-quickmenu').on('click', function() {

    ...

    }

    file: /js/scripts.js

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy