Responsive LibGuides Banner with Pure CSS

Make your LibGuides banners mobile-friendly with pure CSS techniques for responsive scaling and clean presentation across devices.

Why this works

Using simple CSS ensures that banners maintain their proportions across all devices without distortion, offering a clean and professional mobile experience in LibGuides.

Source Code

<div class="banner-wrapper">
  <img src="https://placehold.co/1200x300?text=LibGuides+Banner" alt="LibGuides Banner" class="banner-image">
</div>

<style>
.banner-wrapper {
  width: 100%;
  overflow: hidden;
}
.banner-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .banner-image {
    border-radius: 4px;
  }
}
</style>