Make slider little more responsive
This commit is contained in:
parent
efc4200a9c
commit
1e5c56fb31
2 changed files with 60 additions and 18 deletions
|
@ -7,15 +7,17 @@
|
|||
{% elif this.background_image %}
|
||||
<img src="{{ this.background_image }}" class="d-block w-100" alt="...">
|
||||
{% endif %}
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3 class="display-4">{{ this.title }}</h5>
|
||||
<p class="lead">
|
||||
{{ this.description }}
|
||||
<br>
|
||||
<a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
|
||||
{{ this.button_text }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h3 class="display-4">{{ this.title }}</h5>
|
||||
<p class="lead">
|
||||
{{ this.description }}
|
||||
<br>
|
||||
<a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
|
||||
{{ this.button_text }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -46,12 +46,49 @@
|
|||
width:100%;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
.carousel-caption {
|
||||
right: 5%;
|
||||
text-align: right;
|
||||
left: auto;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
@media (max-width: 575.98px) {
|
||||
.carousel-item {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) and (max-width: 767.98px) {
|
||||
.carousel-item {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.carousel-item {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.carousel-item {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
/*
|
||||
@media (min-width: 1200px) {
|
||||
.carousel-item {
|
||||
height: 900px;
|
||||
}
|
||||
} */
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -132,14 +169,17 @@
|
|||
<div class="carousel-inner">
|
||||
{{ this.slide }}
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
<div class="d-none d-sm-none d-md-block">
|
||||
<a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End of Slider-->
|
||||
|
||||
|
|
Loading…
Reference in a new issue