Mostafa Ahmed Mostafa Ahmed - 1 month ago 5
CSS Question

remove padding from header when size is smaller

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>




Answer

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.