How to reduce size of button

Question

I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.

So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#

<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
     <div class="nimageone">
          <img  src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
     </div>
     <script>
         function myFunction(x){
              x.classList.toggle('change');
         }
     </script>
</div>

Css

.change 
.nimageone img {display:none}

desktop here

Answer 1

You have not included the tree structure of your HTML element comprehensively.

You can achieve what you are trying to do with the following.

    <div>
   <a id="mni" href="#">
   <div class="container4" 
     onclick="myFunction(this)">
    <div class="nimageone"><img 
    src="http://4309.co.uk/wp-  
   content/uploads/2020/05/IMG_20200509_165113-1- 
  219x300.jpg" alt="" width="350" height="300" class=" 
   size-medium wp-image-14178" /></div>
  </div>


 </a> //remember to close the <a> tag here before the 
footer item

 /////Your footer item can come below here 
<footer>
</footer>
</div>

Answer 2

If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.