remove padding from header when size is smaller

Question

i'm making site start with navbar fixed-top then slider has h1 and p tags no images so i'm giving the slides class named .item and giving this class padding:400px 0; to give me big nice header and i'm using background-image property for the whole slider with large screen all works fine but on smaller screens i get big space between the h1 and the navbar also between h1 and the carousel-indicators i'v searched and tried to remove the padding and margin on @media(max-width:750px) and @media(max-width:480px) but it didn't work so how i can losse this padding ?

@media (max-width:750px){
    
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
    }
    
}

@media (max-width: 480px){
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
        
    }
    
    
    
}

/* Slider */
#slide{
    
    background-image: url(../img/header.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
}
.item{
    
    color:#fff;
    padding:400px 0;
}

 <section id="slide" class="text-center">
       <div class="container">
           <div id="mycarousel" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                   <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                   <li data-target="#mycarousel" data-slide-to="1"></li>
                   <li data-target="#mycarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                   <div class="item active">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Only The Stylish Shape</p>
                       <button type="button" class="btn btn-success">I Smell Success</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Take Me There</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Let's Do It</button>
                       
                   </div>
                   
                   
                   
               </div>
               
               
           </div>
           
           
       </div>
       
       
       
   </section>

link link · Accepted Answer · 2016-10-13T22:26:15

You have a typo, it should be #slide not #slider, because of this the .item element is never targeted.

@media (max-width:750px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;
    }
}

@media (max-width: 480px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;    
    }
}

Hope this helps.

remove padding from header when size is smaller

1 Answers