CODEWITHSUNDEEP
htmlcss
Bipin Regmi
Bipin Regmi

Reputation: 1

not being responsive on css and html

I am trying to hide the section called trending podcast and trying to show section slider when it is smaller or equal to 990px .The trending podcast section is hidden successfully but slider section is not visible This is my css

@media only screen and (max-width: 990px)
{
     #sliders
    {
        display: inline-block;
    }
    #trending-podcast
    {
        display: none;
    }
}

This is my html 

    <section id="sliders">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active custom-slider">
          <img class="d-block w-100" src="slider.jpg" alt="First slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>Breaking Tricks</h5>
            <p>Reading Tricks</p>
          </div>
        </div>
        <div class="carousel-item custom-slider">
          <img class="d-block w-100" src="slider2.jpg" alt="Second slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>Breaking Tricks</h5>
            <p>Reading Tricks</p>
          </div>
        </div>
        <div class="carousel-item custom-slider">
          <img class="d-block w-100" src="slider3.jpg" alt="Third slide">
          <div class="carousel-caption d-none d-md-block">
             <h5>Breaking Tricks</h5>
            <p>Reading Tricks</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</section>
<section id="trending-podcast">
    <div class="container">
        <h4 class="trending-podcast-title">Trending Podcast</h4>
        <a href="" class="view-all-podcast">View All</a>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-3 img-box-responsive">
                <div class="thumbnail">
                    <a href="" class="thumbnail-a">
                      <img src="images/readingclub.jpg" alt="..." class="border-img">
                      <div class="caption" class="reading-tricks">
                        <h4>Reading Tricks</h4>
                        <p class="color-ccc">Breaking Tricks</p>
                      </div>
                    </a>
                </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="thumbnail">
                    <a href="" class="thumbnail-a">
                      <img src="images/readingclub.jpg" alt="..." class="border-img">
                      <div class="caption" class="reading-tricks">
                        <h4>Reading Tricks</h4>
                        <p class="color-ccc">Breaking Tricks</p>
                      </div>
                    </a>
                </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="thumbnail">
                    <a href="" class="thumbnail-a">
                      <img src="images/readingclub.jpg" alt="..." class="border-img">
                      <div class="caption" class="reading-tricks">
                        <h4>Reading Tricks</h4>
                        <p class="color-ccc">Breaking Tricks</p>
                      </div>
                    </a>
                </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="thumbnail">
                    <a href="" class="thumbnail-a">
                      <img src="images/readingclub.jpg" alt="..." class="border-img">
                      <div class="caption" class="reading-tricks">
                        <h4>Reading Tricks</h4>
                        <p class="color-ccc">Breaking Tricks</p>
                      </div>
                    </a>
                </div>
          </div>
        </div>
    </div>
</section>

What i am trying to do is when window size is normal the slider section should be remain hidden and podcast part should be visible but when it reduces to more than or equal to 990px the podcast part should be hidden and the slider part should be visible . In small screen it is hidding the podcast part but not showing the slider section

Upvotes: 0

Views: 52

Answers (2)

Ram Segev
Ram Segev

Reputation: 2573

It seems you put the media query before 

#sliders{
   display : none;
}
#trending-podcast{
   display : block;
}

the browser read the css top to bottom and if it find the same selector it will take the property from the last one. click on "Run this snippet" then on "full page" and open console. then switch between desktop and mobile view. 

#sliders{
   display : none;
}
#trending-podcast{
   display : block;
}
@media only screen and (max-width: 990px) {
  #sliders {
    display: inline-block;
  }
  #trending-podcast {
    display: none;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>
<section id="sliders">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active custom-slider">
        <img class="d-block w-100" src="http://lorempixel.com/g/400/200" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>Breaking Tricks</h5>
          <p>Reading Tricks</p>
        </div>
      </div>
      <div class="carousel-item custom-slider">
        <img class="d-block w-100" src="http://lorempixel.com/g/400/200" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>Breaking Tricks</h5>
          <p>Reading Tricks</p>
        </div>
      </div>
      <div class="carousel-item custom-slider">
        <img class="d-block w-100" src="http://lorempixel.com/g/400/200" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>Breaking Tricks</h5>
          <p>Reading Tricks</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>
<section id="trending-podcast">
  <div class="container">
    <h4 class="trending-podcast-title">Trending Podcast</h4>
    <a href="" class="view-all-podcast">View All</a>
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-3 img-box-responsive">
        <div class="thumbnail">
          <a href="" class="thumbnail-a">
            <img src="http://lorempixel.com/g/400/200" alt="..." class="border-img">
            <div class="caption" class="reading-tricks">
              <h4>Reading Tricks</h4>
              <p class="color-ccc">Breaking Tricks</p>
            </div>
          </a>
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-3">
        <div class="thumbnail">
          <a href="" class="thumbnail-a">
            <img src="http://lorempixel.com/g/400/200" alt="..." class="border-img">
            <div class="caption" class="reading-tricks">
              <h4>Reading Tricks</h4>
              <p class="color-ccc">Breaking Tricks</p>
            </div>
          </a>
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-3">
        <div class="thumbnail">
          <a href="" class="thumbnail-a">
            <img src="http://lorempixel.com/g/400/200" alt="..." class="border-img">
            <div class="caption" class="reading-tricks">
              <h4>Reading Tricks</h4>
              <p class="color-ccc">Breaking Tricks</p>
            </div>
          </a>
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-3">
        <div class="thumbnail">
          <a href="" class="thumbnail-a">
            <img src="http://lorempixel.com/g/400/200" alt="..." class="border-img">
            <div class="caption" class="reading-tricks">
              <h4>Reading Tricks</h4>
              <p class="color-ccc">Breaking Tricks</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Fahad Subzwari
Fahad Subzwari

Reputation: 2325

As reading your question it seems that on desktop size you want to show trending podcast and hide slider section but when screen will reach at 990px so you want to show slider section but want to hide trending podcast section. So you have to put display block in normal desktop size css above all media queries like this

#sliders{
   display : none;
}
#trending-podcast{
   display : block;
}

but for less than 990px screens you should do like this

@media only screen and (max-width: 990px)
 {
   #sliders{
    display: block !important;
   }
   #trending-podcast{
    display: none !important;
   }
 }

Upvotes: 0

Related Questions