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 %} {% 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">
<h3 class="display-4">{{ this.title }}</h5> <div class="carousel-caption">
<p class="lead"> <h3 class="display-4">{{ this.title }}</h5>
{{ this.description }} <p class="lead">
<br> {{ this.description }}
<a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true"> <br>
{{ this.button_text }} <a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
</a> {{ this.button_text }}
</p> </a>
</p>
</div>
</div> </div>
</div> </div>

58
templates/layout-2020.html
View file

@ -46,12 +46,49 @@
width:100%; width:100%;
} }
.carousel-caption { .carousel-caption {
right: 5%; right: 5%;
text-align: right; text-align: right;
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,14 +169,17 @@
<div class="carousel-inner"> <div class="carousel-inner">
{{ this.slide }} {{ this.slide }}
</div> </div>
<a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev"> <div class="d-none d-sm-none d-md-block">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
<span class="sr-only">Previous</span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a> <span class="sr-only">Previous</span>
<a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next"> </a>
<span class="carousel-control-next-icon" aria-hidden="true"></span> <a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
<span class="sr-only">Next</span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
</a> <span class="sr-only">Next</span>
</a>
</div>
</div> </div>
<!-- End of Slider--> <!-- End of Slider-->