bootstrap- dropdown not working on mobile devices

Question

I have an image with description and when I hover my mouse of the image, it will show a list of dropdown and it works fine. This is the code:

  <div class="col-md-2 order-first order-lg-last text-center">

        <div class="dropdown">
            <a id="menu1"  >
              <img class="image" src="{{asset('images/bedframe-1.jpg')}}">
            </a> <br> <br>
            <span class="text-capitalize "><strong>Bedframe</strong> </span>
            <ul class="dropdown-menu text-center" role="menu" aria-labelledby="menu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Canopy Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Bunk Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Day Bed</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Platform Bed</a></li>
            </ul>
          </div> <br>


      <h3 style="color:black">Featured Deals</h3> <hr>
          <a href="#" id="menu1">
            <img class="product-item" src="{{asset('images/pillow2.jpg')}}">
          </a> <br> <br>
          <span class="text-capitalize" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum y of type and scrambled it"><strong>[COMPANY NAME]</strong>
            <br>

            <span> Pillow,soft,50cm</span>
            <h3><strong>RM20</strong></h3>
            <ul>

              <li>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span>(60) </span>
              </li>
              <ul><br>


    </div>

<style>
  @media (min-width:480px) {
    .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
      transition: all 1.5s;
      transform: scale(1.0);

      transition: .3s ease-in-out;

    }

  }

  .product-item {

    height: 150px;
    width: 150px;

  }


  ul {

    list-style-type: none;
  }


  .image {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 100%;
    height: 200px;
    width: 200px;
  }

  .image:hover {
    transform: scale(0.5);


  }

  .checked {
    color: orange;
  }


</style>

However, when I run on my mobile device, the behavior should show the dropdown list when I tap on the image but tapping on the image does not show the dropdown. How do I fix this issue?

Answer 1

Here You have used min-width of 480px for displaying dropdown menu as display:block .So below it, css won't affect the dropdown. either write another media query to handle that case or lower the range(I have tried with 200 and it works fine) as per your requirement.

Hope it helps!!

Answer 2

Its not working since you have placed dropdown-menu in a media query.

 .dropdown-menu{
       display:none
    }    
    .dropdown:hover .dropdown-menu {
          display: block;
          margin-top: 0;
          transition: all 1.5s;
          transform: scale(1.0);

          transition: .3s ease-in-out;

        }