Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #419908

    Hi everyone,

    The content element “Tabs” is not working properly on my website. Under the Rides section they work on desktop versions, but on the mobile version, the Sunday B Ride tabs are not clickable while the Thursday A Ride is. Can any one explain this?

    Please note: (This maybe the issue), I created a div called overlay that lays over the embed Google maps so that people don’t get stuck in the map when a user scrolls down. However, once clicked users are then able to interact with it. This maybe the cause? But it works on the second Google Map without interfering with anything.

    See my code:
    HTML

    <html>
      <div class="overlay" onClick="style.pointerEvents='none'"></div>
      <iframe src="https://www.google.com/maps/d/u/0/embed?mid=zvUdQBZr0MHU.kz-rZSF8FM2A" width="640" height="480"></iframe>
    </html>

    CSS

    .overlay {
       background: transparent; 
       position: relative; 
       width:640px;
       height:480px; /* your iframe height */
       top:480px;  /* your iframe height */
       margin-top: -480px;  /* your iframe height */
    }
    #420262

    Hey Jared!

    I think your customisation is the likely culprit here, you could see if it covers the links by adding a border to the overlay to see where it extends to on mobile devices by adding this to your CSS:

    @media only screen and (max-width: 767px) {
    .overlay{
    border:1px solid red !important;
    }
    }

    Best regards,
    Rikard

    #420445

    I added a border to the overlay and it does NOT cover the tabs/links, but instead moves over towards to the right of a screen. I removed all css and <div> and it worked fine. It seems the overlay continues onto the tabs even though it doesn’t show the continuation of the overlay in mobile screens as is overlaps the space between.

    Here’s a screenshot with the border: border

    • This reply was modified 9 years, 2 months ago by radchild.
    #420964

    Hey!

    I think you need to play around with the values a bit, I’m pretty sure the iframe is not fully responsive.

       width:640px;
       height:480px; /* your iframe height */
       top:480px;  /* your iframe height */
       margin-top: -480px;  /* your iframe height */

    Cheers!
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.