Mobile screen size alias links not working but normal links do work

Question

ROBLEM: In Mobile screen size alias links are not working, but normal links that points to any other webpage ex. social media do work.

Description

1. I have built a project (HTML, CSS, JS building tool) with https://bootstrapshuffle.com/
2. I have exported the project
3. Put it in to a django project
4. I have added a few extra buttons to the middle of the screen that are fusions as alias on the landing page.
5. ERORR: This exported project perfectly works with all the buttons when it is in Desktop screen size or tablet screen size (both cases the original builder reorganizes the components). But when I shrink the screen size to the size of a mobile and it reorganizes the components it leaves these alias buttons that worked in both tablet and desktop mode but does not in this mobile screen size.

6. I have read the following projects and I probably have something similar

   • Href links do not transpire/work at mobile size screen
   • media queries not working on mobile screen size
   • Links not working on site when screen size is reduced

7. The only issue is that I have that the downloaded project from the online editor only given me a bootstrap.min.css and bootstrap.min.css.map non of them is organized. Is there a way to make them organized and find the causing problem in them? What are the probable elements that can cause this error?

IT should go from here

...
<button href="#subscribe" class="btn btn-primary mb-2">Subscribe</button>
...

It should go to here

<section class="py-5">
        <div class="container ">
          <div class="carousel slide carousel-fade" id="carousel-gallery-07" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div>
                   <a id=subscribe></a>
...

On the Navbar I also have a Subscribe button and in mobile size this is also not working. This whole navbar is in a header_footer.html file and this is how it connects tho the index.html home page. All the navigational elements that are also alias links are working even during mobile screen size like: "about, pricing, ..." but the "subscribe" button that is on the other side that is not working in mobile screen size (in desktop and tablet screen size it is working).

<header>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-xl fixed-top navbar-light" >
      <a class="navbar-brand col-1 pl-0 mr-0" href="#">
        <img src="static/logo.png" alt="" width="50">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigations-08" aria-controls="navigations-08" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navigations-08">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#home">
              Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#howitworks">About</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Others</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#pricing">Pricing</a>
              <a class="dropdown-item" href="#team">Team</a>
              <a class="dropdown-item" href="#contact">Contact</a>
            </div>
          </li>
        </ul>
        <form class="">
          <a class="btn btn-primary mb-2 nav-link" href="#subscribe">Subscribe</a>
        </form>
      </div>
    </nav>
  </div>  
</header>

Answer 1

add clearfix to the section or container class and that should work

Answer 2

I have solved the situation by hiding the buttons all together, that are not working in mobile screen.

<div class=" d-none d-md-block">
   <a class="btn btn-primary" href="#subscribe">Subscribe</a>
</div>