Public Ticket #1780054
Portfolio & Google Map Sections


  • runeer started the conversation

    Hi, thanks for the beautiful and useful template. 

    Right now I have 2 issues with the template on mobile devices:

    1. Portfolio section (Bungalows in this case) is not working, is it because of the mouseover overlay function? How do I solve this problem?

    2. I have my own google map api key applied, it's not working on mobile version sometimes sometimes desktop version either.

  • runeer replied

    Hi, as for portfolio section, we just realized that only the last thumbnail is tappable on mobile devices.

  • topumin replied

    Sorry I can't post the new article.

    I need to borrow your article to ark the question please.

    "Cloud you please let me know where file name of JavaScript or jQuery which using for portfolio-3.html about extension class name of ‘web-design’, ‘mockup’, etc. I need to config these one to accordant for my work.

    Thanks for awnser

    P.S. I mean the resource of ‘data-filter’ element in tag of portfolio-3.html which caused the data (work-container, work-image) to sorting."

    "data-filter=”*” All —> work

    data-filter=”food”> Food —> don’t work

    data-filter=”shop”> Shop—> don’t work"

  •  7
    Alexander replied


    Hi, regarding Google map error, here is the console message:

    Geocoding Service: This API project is not authorized to use this API.  For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

    You should setup your own key properly in order to make it work.

    Regarding portfolio:

    Try to add onclick attribute to your portfolio item, like so:

    <div class="work-item" onclick="void(0)">
                <div class="work-img">
                  <img src="img/type-a-view-a.jpg" alt="">
                  <div class="work-overlay">        
                     <a href="img/type-a-view-a-large.jpg" class="lightbox-gallery btn btn-lg btn-transparent" title="Bungalow | Type A | View 1">View Image</a>
  •  7
    Alexander replied


    The code that adds classes to filter located in scripts.js.

    But the main functionality is inside isotope plugin, which is minified in plugins.js

    /* Isotope Filter
    -------------------------------------------------------*/  $('.portfolio-filter').on( 'click', 'a', function(e) { e.preventDefault(); var filterValue = $(this).attr('data-filter'); $container.isotope({ filter: filterValue });
    $('.portfolio-filter a').removeClass('active'); $(this).closest('a').addClass('active');

    You can download unminified version of isotope here - https://github.com/metafizzy/isotope


  • runeer replied

    Hi Alexander,

    Thanks, and I've updated the website www.runeer.net/rr/

    Google map: It works on desktop browsers now, but not on some Android phones.

    Portfolio (mobile): added "onclick" attribute, only the last row (Bungalow | Type D & E) works.

  •  7
    Alexander replied

    Try to add this CSS:

    .grid-wide {
    overflow: hidden;

    Regarding Google map, it still shows error in console:

    Geocoding Service: This API project is not authorized to use this API.

    Check the restriction for your key, you need to set it to your domain in order to work:


  • runeer replied

    Hi Alex,

    Thanks for the updates!

    Portfolio: Problem solved!

    Map: Added restrictions, same problem happens: appears only on some mobile devices, also observed problem with MacOS (Chrome, Safari)...

  •  7
    Alexander replied


    I still see the same error in console. It means that your API key is not configured correctly. Try to visit your API dashboard, and make sure that it's enabled - https://console.developers.google.com/

    Here is the screenshot of how our API configured - https://clip2net.com/s/3XWxkwq

    Let me know if it hepls.