Sowmiya P Sowmiya P - 3 months ago 7
jQuery Question

jumbotron and carousel padding

I have a carousel in home page and jumbotron class resides Below that carousel.I give padding-top for the jumbotron. It reflects the other pages not having carousel.It happens only in mobile view.
To fix this issue,I put the following jquery code in .js file

if($(".body_content").hasClass( ".carousel" )){
$(".jumbotron").css({"padding-top":"280px"});
}
else{
$(".jumbotron").css({"padding-top":"0px","margin-top":"-70px"});
}


But this works on all pages including home page.
Can anybody give me the solution? Please give me...

Answer
//Will check if "carousel" exist in page or not.
if ( $( ".carousel" ).length ) { 
    $(".jumbotron").addClass('home-jumbotron');
}else{
    $(".jumbotron").addClass('not-home-jumbotron');
}

//Media query CSS (So it can be affected to mobile view only)
@media screen and (max-width: 900px) {
    .home-jumbotron {
          padding-top: 280px;
     }    
    .not-home-jumbotron {
          padding-top: 0px;
          margin-top:-70px
     }
}