little better

This commit is contained in:
ahmadbilalkhalid 2020-05-06 11:21:02 +05:00
parent 1e5c56fb31
commit 47f3bbd826
2 changed files with 11 additions and 14 deletions

View file

@ -9,7 +9,7 @@
{% endif %} {% endif %}
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h3 class="display-4">{{ this.title }}</h5> <h3 class="display-4">{{ this.title }}</h3>
<p class="lead"> <p class="lead">
{{ this.description }} {{ this.description }}
<br> <br>

View file

@ -44,6 +44,7 @@
<style> <style>
video{ video{
width:100%; width:100%;
object-fit: cover;
} }
.carousel-caption { .carousel-caption {
@ -55,39 +56,39 @@
/* Extra small devices (portrait phones, less than 576px) */ /* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.carousel-item { .carousel-item img, video {
height: 200px; height: 280px;
} }
} }
/* Small devices (landscape phones, 576px and up) */ /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { @media (min-width: 576px) and (max-width: 767.98px) {
.carousel-item { .carousel-item img, video {
height: 300px; height: 300px;
} }
} }
/* Medium devices (tablets, 768px and up) */ /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { @media (min-width: 768px) and (max-width: 991.98px) {
.carousel-item { .carousel-item img, video {
height: 400px; height: 400px;
} }
} }
/* Large devices (desktops, 992px and up) */ /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { @media (min-width: 992px) and (max-width: 1199.98px) {
.carousel-item { .carousel-item img, video {
height: 450px; height: 450px;
} }
} }
/* Extra large devices (large desktops, 1200px and up) */ /* Extra large devices (large desktops, 1200px and up) */
/*
@media (min-width: 1200px) { @media (min-width: 1200px) {
.carousel-item { .carousel-item img, video {
height: 900px; height: 900px;
} }
} */ }
</style> </style>
</head> </head>
@ -159,11 +160,7 @@
<div id="head-carousel" class="carousel slide" data-ride="carousel"> <div id="head-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
{% for slide in this.slide.blocks %} {% for slide in this.slide.blocks %}
{% if loop.index0 == 0 %} {% if loop.index0 == 0 %}<li data-target="#head-carousel" data-slide-to="0" class="active"></li>{% else %}<li data-target="#head-carousel" data-slide-to="{{ loop.index0 }}"></li>{% endif %}
<li data-target="#head-carousel" data-slide-to="0" class="active"></li>
{% else %}
<li data-target="#head-carousel" data-slide-to="{{ loop.index0 }}"></li>
{% endif %}
{% endfor %} {% endfor %}
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">