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

20
templates/blocks/slide.html
View file

@ -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>

58
templates/layout-2020.html
View file

@ -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-->