ungleich-public
/
ungleich-staticcms
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Make slider little more responsive

merge-requests/7/head
_ahmedbilal 3 years ago
parent
efc4200a9c
commit
1e5c56fb31
2 changed files with 60 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      templates/blocks/slide.html
  2. 58
      templates/layout-2020.html

20
templates/blocks/slide.html
Unescape 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
Unescape 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-->

Write Preview
Loading…
Cancel
Save