how to eliminate bootstrap margins only in the caroufredsel?

Question

how to eliminate bootstrap margins only in the caroufredsel?

Navigation

#1 by (0 votes)

1

@font-face {
    font-family: "champagne&limousines";
    src: url('../fonts/Guava/Champagne & Limousines.ttf') format('truetype'); 

    font-family: "champagne&limousines-bold";
    src: url('../fonts/Guava/Champagne & Limousines Bold.ttf') format('truetype');
} 

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font: 14px "champagne&limousines", sans-serif;
    text-align: justify;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/*revisar logo*/
a.navbar-brand {
    background-color: rgba(255, 255, 255, 0.7);
    background: url(../img/logo/logotrans.png) no-repeat top left;
    display: block;
    width: 114px;
    height: 64px;
    margin: 20px 20px;
    margin-right: 40px;
    text-indent: -9999px; /* hides the link text */
}

.navbar-inverse .navbar-nav > li > a 
{
    color: rgba(255, 255, 255, 0.7);
}

a.menu-lindo {
    font: 26px "champagne&limousines-bold", sans-serif;
    margin-top: 25px;
    margin-right: 10px;
    line-height: 25px;
}

a.menu-lindo:hover, a.menu-lindo:focus {
    font: 26px "champagne&limousines-bold", sans-serif;
    padding: 10px 15px;
}

.navbar {
    background-color: rgba(211,47,47, 0.9);
    border-color: rgba(211,47,47, 0.9);
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: #b71c1c;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: #D32F2F;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(211,47,47, 0.9);
}

.jumbotron {
    padding: 15px 30px !important;
}

.well {
    margin-top: 80px;
}

a {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    font-size: 18px;
}

a:hover {
    color: #b71c1c;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

a:focus {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

h2 .titulo-receta {
    margin-top: 170px;
}

.miimagen{
    margin-top: 80px;
}

a.btn {
    color: #fff;
    font: 18px "champagne&limousines-bold", sans-serif;
}

a.btn:hover, a.btn:focus, a.btn:active, a.btn:visited {
    color: #fff !important;
    font: 18px "champagne&limousines-bold", sans-serif;
}

.backbar {
    margin-top: 55px;
    background: rgba(118,129,159, 0.7);
}

.backbar .btn {
    background: rgba(118,129,159, 0.7);
    margin: 10px 10px;
    border-color: #fff;
}

.backbar .btn:hover, .backbar .btn:focus {
    background: rgba(118,129,159, 1);
}

/*slider*/
.slider  {
    margin-top: 55px
}

.container .body-content {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.slider .slider-carousel {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.caroufredsel_wraper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
    height: 100%;
    width: 100%;
    text-align: center;
    color: #FFF;
}

.slider ul.slider-carousel li h3 {
    margin-top: 150px;
    margin-bottom: 30px;
    color: #FFF;
}

.slider ul.slider-carousel li p {
    margin-bottom: 20px;
}

.img1 {
    background: url('../img/slider/1.png');
    background-size: 100% 100%;
}

.img2 {
    background: url('../img/slider/2.png');
    background-size: 100% 100%;
}

.img3 {
    background: url('../img/slider/3.png');
    background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
    color: #E74C3C;
}

.slider ul.sliderpager li a {
    color: #34495E;
}

.slider ul.sliderpager li {
    padding: 0 3px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
}


/*footer */
footer .copyright {
    text-align: center;
    margin-top: 80px;
}

<div class="slider" id="slider">
    <ul class="slider-carousel" id="slider-carousel">
        <li class="img1">
            <h3></h3>
            <p></p>
        </li>
        <li class="img2">
            <h3></h3>
            <p></p>
        </li>
        <li class="img3">
            <h3></h3>
            <p></p>
        </li>
    </ul>
    <ul class="sliderpager">
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
    </ul>
</div>

I want to eliminate the margins so that the images of the slider cover the entire width of the page, but only the part of the slider, the rest is perfect ...

html css bootstrap

asked by CeciPeque 09.07.2018 в 01:58

source

1 answer

MARQUARDT in Non-linear Regression in R Add by rows in SQL [closed]

score 0 · Answer 1

What you have to do is use the universal selector to eliminate the margin and the padding in all the elements in the following way, besides making the edge and the padding count to measure the size of the elements:

* {margin:0;padding:0;box-sizing:border-box;}

Once this is done, you add the margin and the padding to whatever you want, but that both are based on 0, besides seeing your code this will save you a lot of time and lines of code, I have seen that many elements take away the margin manually and using the universal selector you will not waste time doing that.

Here is your example with what I have indicated:

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

@font-face {
    font-family: "champagne&limousines";
    src: url('../fonts/Guava/Champagne & Limousines.ttf') format('truetype'); 

    font-family: "champagne&limousines-bold";
    src: url('../fonts/Guava/Champagne & Limousines Bold.ttf') format('truetype');
} 

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font: 14px "champagne&limousines", sans-serif;
    text-align: justify;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/*revisar logo*/
a.navbar-brand {
    background-color: rgba(255, 255, 255, 0.7);
    background: url(../img/logo/logotrans.png) no-repeat top left;
    display: block;
    width: 114px;
    height: 64px;
    margin: 20px 20px;
    margin-right: 40px;
    text-indent: -9999px; /* hides the link text */
}

.navbar-inverse .navbar-nav > li > a 
{
    color: rgba(255, 255, 255, 0.7);
}

a.menu-lindo {
    font: 26px "champagne&limousines-bold", sans-serif;
    margin-top: 25px;
    margin-right: 10px;
    line-height: 25px;
}

a.menu-lindo:hover, a.menu-lindo:focus {
    font: 26px "champagne&limousines-bold", sans-serif;
    padding: 10px 15px;
}

.navbar {
    background-color: rgba(211,47,47, 0.9);
    border-color: rgba(211,47,47, 0.9);
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: #b71c1c;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: #D32F2F;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(211,47,47, 0.9);
}

.jumbotron {
    padding: 15px 30px !important;
}

.well {
    margin-top: 80px;
}

a {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    font-size: 18px;
}

a:hover {
    color: #b71c1c;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

a:focus {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

h2 .titulo-receta {
    margin-top: 170px;
}

.miimagen{
    margin-top: 80px;
}

a.btn {
    color: #fff;
    font: 18px "champagne&limousines-bold", sans-serif;
}

a.btn:hover, a.btn:focus, a.btn:active, a.btn:visited {
    color: #fff !important;
    font: 18px "champagne&limousines-bold", sans-serif;
}

.backbar {
    margin-top: 55px;
    background: rgba(118,129,159, 0.7);
}

.backbar .btn {
    background: rgba(118,129,159, 0.7);
    margin: 10px 10px;
    border-color: #fff;
}

.backbar .btn:hover, .backbar .btn:focus {
    background: rgba(118,129,159, 1);
}

/*slider*/
.slider  {
    margin-top: 55px
}

.container .body-content {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.slider .slider-carousel {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.caroufredsel_wraper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
    height: 100%;
    width: 100%;
    text-align: center;
    color: #FFF;
}

.slider ul.slider-carousel li h3 {
    margin-top: 150px;
    margin-bottom: 30px;
    color: #FFF;
}

.slider ul.slider-carousel li p {
    margin-bottom: 20px;
}

.img1 {
    background: url('https://misanimales.com/wp-content/uploads/2017/11/pantera.jpg');
    background-size: 100% 100%;
}

.img2 {
    background: url('https://misanimales.com/wp-content/uploads/2017/11/pantera.jpg');
    background-size: 100% 100%;
}

.img3 {
    background: url('https://misanimales.com/wp-content/uploads/2017/11/pantera.jpg');
    background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
    color: #E74C3C;
}

.slider ul.sliderpager li a {
    color: #34495E;
}

.slider ul.sliderpager li {
    padding: 0 3px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
}


/*footer */
footer .copyright {
    text-align: center;
    margin-top: 80px;
}

<div class="slider" id="slider">
    <ul class="slider-carousel" id="slider-carousel">
        <li class="img1">
            <h3></h3>
            <p></p>
        </li>
        <li class="img2">
            <h3></h3>
            <p></p>
        </li>
        <li class="img3">
            <h3></h3>
            <p></p>
        </li>
    </ul>
    <ul class="sliderpager">
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
    </ul>
</div>