Mam dwa problemy, może ktoś z Was podsunie rozwiązanie.
1. Jak widać w kodzie HTML, mam w sekcji 6 obrazków (po 2 w rzędzie). Szerokość ustawiona za pomocą grida z Bootstrapa. Nie wiem jak jest wyśrodkować. Wymyśliłem doraźne rozwiązanie z dodaniem col-md-offset-1 do diva z obrazkiem po lewej stronie.
Jak wyśrodkować divy, aby były idealnie na środku z 15px marginesem pomiędzy divem z obrazkiem po lewej i prawej stronie.
2. W jaki sposób dopisywać media query w kodzie Sass do danego elementu? Proszę o przykład.
<section class="second-section">
<div class="headline">
<p class="headline-par">Select your venue</p>
</div>
<div class="container">
<div class="row">
<div class="size img1 col-md-5 col-md-offset-1">
<div class="info">
<p class="par-info">Adelaide</p>
<p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
<a href="#" target="_blank">
<button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
</a>
</div>
</div>
<div class="size img2 col-md-5">
<div class="info">
<p class="par-info">Brisbane</p>
<p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
<a href="#" target="_blank">
<button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
</a>
</div>
</div>
</div>
<div class="row">
<div class="size img3 col-md-5 col-md-offset-1">
<div class="info">
<p class="par-info">Melbourne</p>
<p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
<a href="#" target="_blank">
<button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
</a>
</div>
</div>
<div class="size img4 col-md-5">
<div class="info">
<p class="par-info">Perth</p>
<p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
<a href="#" target="_blank">
<button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
</a>
</div>
</div>
</div>
<div class="row">
<div class="size img5 col-md-5 col-md-offset-1">
<div class="dark-layer">
</div>
</div>
<div class="size img6 col-md-5">
<div class="info">
<p class="par-info">Sydney</p>
<p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
<a href="#" target="_blank">
<button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
</a>
</div>
</div>
</div>
</div>
</section>
.second-section
.headline {
background-color: $project-pinkLight2;
margin: 40px auto;
}
.headline-par {
text-transform: uppercase;
text-align: center;
font-size: 25px;
padding: 20px;
}
.container
.row
.size{
width: 450px;
height: 350px;
margin-bottom: 15px;
background-size: cover;
background-position: center;
overflow: hidden;
}
.img1 {
@extend .size;
background-image: url("bg_images/18.png");
}
.img2 {
@extend .size;
background-image: url("bg_images/9.png");
margin-left: 15px;
}
.img3 {
@extend .size;
background-image: url("bg_images/8.png");
}
.img4 {
@extend .size;
background-image: url("bg_images/7.png");
margin-left: 15px;
}
.img5 {
@extend .size;
background-image: url("bg_images/7.png");
}
.img6 {
@extend .size;
background-image: url("bg_images/6.png");
margin-left: 15px;
}
.info {
position: relative;
top: 190px;
left: 10px;
}
.par-info {
text-transform: uppercase;
color: #fff;
font-size: 24px;
}
.par-info-data {
color: #fff;
font-size: 18px;
}
.dark-layer {
position: relative;
right: 15px;
width: 450px;
height: 350px;
background-color: rgba(2,20,51,0.8);
}