Manage bootstrap carousel with media queries -
i have unique carousel used in different pages different height. when try manage carousel control , icons used in different screen sizes use media queries following css instructions: @media screen , (min-width : 1224px) { #carouseli .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 24px; line-height: 24px; margin-top: -35px; } #carouselr .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 24px; line-height: 24px; margin-top: -35px; } } but when modify settings of carouselr, affects both carousels. don't know why if select object # symbol. anybody can me issue? thank in advanced post updated html code: <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0"> <div class="container-fluid"> ...