Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve banner on mobile devices

Browse source
This commit is contained in:
Eli Ribble 2026-01-31 21:47:46 +00:00
parent f20067b323
commit a369758eda
No known key found for this signature in database
3 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
rmo/template/component/header-rmo.html
View file

@ -3,7 +3,7 @@
<div class="container">
<div class="d-flex align-items-center">
<a class="navbar-brand d-flex align-items-center" href="/">
<img src="/static/img/rmo/banner.jpg" style="height: 224px;" alt="Report Mosquitoes Online logo"></img>
<img class="banner" src="/static/img/rmo/banner.jpg" alt="Report Mosquitoes Online logo"></img>
</a>
</div>
</div>

4
rmo/template/root.html
View file

@ -7,9 +7,9 @@
<!-- Main Content -->
<main>
<!-- Introduction Section -->
<section class="py-5 bg-primary text-white">
<section class="py-2 bg-primary text-white">
<div class="banner-container d-flex justify-content-center">
<img class="banner-image" src="/static/img/rmo/banner.jpg"/>
<img class="banner" src="/static/img/rmo/banner.jpg"/>
</div>
</section>

19
scss/rmo/root.scss
View file

@ -1,3 +1,16 @@
.banner {
display: block;
}
@include media-breakpoint-up(xs) {
.banner {
width: 100%;
}
}
@include media-breakpoint-up(xl) {
.banner {
height: 100%;
}
}
.service-card {
transition: transform 0.3s;
height: 100%;
@ -24,9 +37,3 @@
background-color: #F76436;
overflow: hidden;
}
.banner-image {
display: block;
/* width as needed */
}