euantorano/ungleich-staticcms
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Make slider little more responsive

Browse source
This commit is contained in:
ahmadbilalkhalid 2020-05-06 10:20:00 +05:00
parent efc4200a9c
commit 1e5c56fb31
2 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/blocks/slide.html
View file

@ -7,7 +7,8 @@
{% 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">
<div class="container">
<div class="carousel-caption">
<h3 class="display-4">{{ this.title }}</h5>
<p class="lead">
{{ this.description }}
@ -18,4 +19,5 @@
</p>
</div>
</div>
</div>

40
templates/layout-2020.html
View file

@ -52,6 +52,43 @@
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,6 +169,7 @@
<div class="carousel-inner">
{{ this.slide }}
</div>
<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>
@ -141,6 +179,8 @@
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- End of Slider-->
{% elif this.headline1 or this.headline2 or this.headline3 %}