nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2024-11-22 22:36:37 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

index.html and Style-index.css - Made Carousel more responsive in other widths (Mainly phones)

Browse source
This commit is contained in:
Matthew Patrick 2021-09-26 13:20:46 +07:00
parent f05c55b4eb
commit ee9eb12853
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Style-index.css
View file

@ -5,6 +5,18 @@ body {
background-color: #1b1c1e; background-color: #1b1c1e;
} }
@media screen and (max-width: 426px) {
.carousel-item img {
height: 60vw;
}
}
@media screen and (min-width: 427px) {
.carousel-item img {
height: 40vw;
}
}
.nav-color { .nav-color {
background-color: #212226; background-color: #212226;
} }

6
index.html
View file

@ -60,13 +60,13 @@
</ol> </ol>
<div class="carousel-inner" id="carousel-img"> <div class="carousel-inner" id="carousel-img">
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block w-100" src="assets/Carousel_1.webp" alt="First slide" height="550px"> <img class="d-block w-100" src="assets/Carousel_1.webp" alt="First slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="assets/Carousel_2.webp" alt="Second slide" height="550px"> <img class="d-block w-100" src="assets/Carousel_2.webp" alt="Second slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="assets/Carousel_3.webp" alt="Third slide" height="550px"> <img class="d-block w-100" src="assets/Carousel_3.webp" alt="Third slide">
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">