ungleich-public/ungleich-staticcms
6
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 %} {% elif this.background_image %}
<img src="{{ this.background_image }}" class="d-block w-100" alt="..."> <img src="{{ this.background_image }}" class="d-block w-100" alt="...">
{% endif %} {% endif %}
<div class="carousel-caption d-none d-md-block"> <div class="container">
<div class="carousel-caption">
<h3 class="display-4">{{ this.title }}</h5> <h3 class="display-4">{{ this.title }}</h5>
<p class="lead"> <p class="lead">
{{ this.description }} {{ this.description }}
@ -17,5 +18,6 @@
</a> </a>
</p> </p>
</div> </div>
</div>
</div> </div>

40
templates/layout-2020.html
View file

@ -52,6 +52,43 @@
left: auto; left: auto;
padding:5px; 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> </style>
</head> </head>
<body> <body>
@ -132,6 +169,7 @@
<div class="carousel-inner"> <div class="carousel-inner">
{{ this.slide }} {{ this.slide }}
</div> </div>
<div class="d-none d-sm-none d-md-block">
<a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev"> <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="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -141,6 +179,8 @@
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div>
<!-- End of Slider--> <!-- End of Slider-->
{% elif this.headline1 or this.headline2 or this.headline3 %} {% elif this.headline1 or this.headline2 or this.headline3 %}