Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 28, 2015 at 8:35 pm #419908
    radchild

    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 */
}
    March 30, 2015 at 8:53 am #420262
    Rikard

    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

    March 30, 2015 at 2:38 pm #420445
    radchild

    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 ago by radchild.
    March 31, 2015 at 7:08 am #420964
    Rikard

    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

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