Links unclickable on a page

These are the links I’ve added to the page:

<div><h2><a href="https://gos4.com/digital-marketing-melbourne/" target="_blank"  class="button one">Digital Marketing </a>
					<a href="https://gos4.com/video-production-melbourne/" target="_blank"  class="button one">Video Production </a> 
					<a href="https://gos4.com/graphic-design-melbourne/" target="_blank"  class="button one">Graphics Design </a> <br></h2></div>

And the css:

    .button{
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: relative;
                    padding: 10px;
                    margin: 10px 20px 30px 0 !important;
}

@media screen and (max-width: 800px) {
  .button {
    display:block;
      z-index:above;
  }
}

It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.

Please let me know how I can fix this.

• This topic was modified 4 years, 5 months ago by Anshuman.
• This topic was modified 4 years, 5 months ago by Anshuman.
• This topic was modified 4 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]