Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code:

<section id="banner">

    <div class="banner-bg">
        <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-1.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-2.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-3.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-4.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-5.jpg'); ?>"  alt="">
      </div>
    </div>
</div>

Also, here is my CSS code:

#banner .banner-bg .banner-bg-item {
  height: 100vh;
  min-height: 650px;
  background-size: cover;
  background-position: center;
}

#banner .banner-bg .banner-bg-item .img-responsive{
    max-width: 100%;
    height: auto !important;
    display:block;

}

@media (max-width: 768px) {
  #banner .banner-bg .banner-bg-item {
    min-height: 920px;
  }

.banner-bg .banner-bg-item .textoverlay{
          padding-top: 30%;
          padding-left: 12%;
          color:  white;
      }
        .banner-bg .banner-bg-item .textoverlay #caption1{
          background-color: rgba(0, 26, 9, 0.3);
          width: 640px;
      }
        .banner-bg .banner-bg-item .textoverlay #caption2{
          background-color: rgba(0, 26, 9, 0.3);
          width: 500px;

      }

I have provided both the HTML and CSS codes for my website, but unfortunately, I have not been able to make my images responsive despite using Owl Carousel for the slider. Any help or guidance in solving this issue would be greatly appreciated as my efforts to find a solution online have been unsuccessful so far.

javascripthtmlcsscodeigniter

Answer №1

Give this a shot

.banner-bg .banner-bg-item .textoverlay{
      padding-top: 30%;
      padding-left: 12%;
      color:  white;
  }
    .banner-bg .banner-bg-item .textoverlay #caption1{
      background-color: rgba(0, 26, 9, 0.3);
      width: 100%;
  }
    .banner-bg .banner-bg-item .textoverlay #caption2{
      background-color: rgba(0, 26, 9, 0.3);
      width: 100%;

  }

Check out this slider component startbootstrap-full-slider

Answer №2

Here is a suggested CSS code snippet for you to try:

#banner .banner-bg .banner-bg-item {
   height: 75%;
   min-height: 250px;
   background-size: cover;
   background-position: center;
   width: 50%;
}
.textoverlay {
   height: 10%;
}

#banner .banner-bg .banner-bg-item .img-responsive{
    max-width: 100%;
    display: block;
    height: 90%;

 }

  @media (max-width: 768px) {
     #banner .banner-bg .banner-bg-item {
      min-height: 920px;
  }

.banner-bg .banner-bg-item .textoverlay{
      padding-top: 30%;
      padding-left: 12%;
      color:  white;
  }
    .banner-bg .banner-bg-item .textoverlay #caption1{
      background-color: rgba(0, 26, 9, 0.3);
      width: 640px;
  }
    .banner-bg .banner-bg-item .textoverlay #caption2{
      background-color: rgba(0, 26, 9, 0.3);
      width: 500px;

  }

To create responsive images, it's recommended to set the height and width in percentages, or utilize media queries to adjust the size based on specific screen sizes. Using percentages can alter image size, however, media queries should be used to specify font size for text.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

What is the best way to choose a key from a discriminated union type?

I have a discriminated union with different types type MyDUnion = { type: "anonymous"; name: string } | { type: "google"; idToken: string }; I am trying to directly access the 'name' key from the discriminator union, like thi ...

javascripttypescriptdiscriminated-union

Observing the occurrences of JavaScript events

Is there a way to track all JavaScript events in the browser? Such as, identifying the functions that have been executed and the parameters that have been passed in each JS file? I'm dealing with some obfuscated code and I'm looking to determine ...

javascriptfirebug

Tips for arranging years in descending order in the material-ui Date Picker's calendar interface

This is the Code I Used - import "./styles.css"; import { DatePicker } from "@mui/x-date-pickers"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDateFns } from "@mui/x-da ...

javascriptreactjsmaterial-uidatepickermomentjs

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

javascriptjqueryangulartypescriptangularjs-directive

Passing no data in Angular.js ui-router.Angular.js ui-router

Within my Ionic application, there is a need to pass parameter(s) from one sub-view to another. Initially, the parameters are successfully passed as expected. However, upon returning to the first sub-view and then navigating to another sub-view, the parame ...

javascriptangularjsionic-frameworkangular-ui-router

Troubleshooting Vue.js dynamic image path loading issues

Struggling to dynamically load images in a single file component, I keep encountering an error stating that the module cannot be found. It seems like I'm attempting something similar to what was discussed in this post on Stack Overflow, but I can&apos ...

javascriptwebpackvue.jsvuejs2

Ensure that immutability is strictly enforced, or allow for partial immutability without the risk of silently failing

Is there a method to implement partial immutability on an object in a way that triggers an error if any attempt at mutation is made? For instance, consider let obj = {a: 1, b: 2}. I am interested in making obj.a and obj.b immutable while still allowing ad ...

javascriptecmascript-6immutability

What is the best way to extract a color box from a Bootstrap container?

After trying multiple solutions found online, I'm still struggling to break out of the bootstrap container as needed. The setup involves a .fluid-container for a full-width background behind a regular .container. The challenge arises when the first co ...

csstwitter-bootstrapbootstrap-5

Sorry, but React does not accept objects as valid children. Make sure the content you are passing is a valid React child element

I encountered an issue with rendering on a screen that involves receiving an object. The error message I received is as follows: Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection o ...

javascriptreactjsreact-native

Issue with retrieving Combobox value within AngularJS ng-repeat generated table using ng-model

Here is my code that I need help with: <thead> <tr> <th>Id Detalle_Venta</th> <th>Id Producto</th> <th>Producto </th> <th>Cantidad </th> <th>Direccion </th> ...

angularjshtmlcontroller

Allusion to a intricate data component

In my code, I have a model that is being represented by a class. For example, let's consider the model of a car: export class Car { public name : string; public color: string; public power : number; public service : boolean; } All c ...

javascriptangulartypescript

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

What is the best way to retrieve app.state in a Remix project when running a Cypress test?

One way Cypress can expose an app's state to the test runner is by using the following approach in React: class MyComponent extends React.Component { constructor (props) { super(props) // only expose the app during E2E tests if (window.C ...

javascripttypescriptstatecypressremix.run

Generating a dynamic sitemap with Next.js

I have been working on a project where I need to create a sitemap, and I am currently using next-sitemap for generation. However, I've encountered an issue with this method, as well as other solutions I've come across, because the sitemap is only ...

javascriptreactjsnext.jssitemap

Exploring object-level "this" behavior in jQuery

If I were to implement the following code snippet: const CustomObject = function() { this.showAlert = function() { alert("Hello World!"); } } CustomObject.prototype.bindToElement = function(element) { const self = this; $(element).bind(' ...

javascriptjquery

Adding items to an array retrieved from JSON

My goal is to merge 3 different Facebook feeds into a single object called "item." Each item includes the post creation time and the JSON data itself. However, I'm facing an issue where only 5 items are displayed when I check the log, even though ther ...

javascriptjqueryjson

Guide on creating dynamic datasets and multiple dynamic yAxes

To enhance my chart, I am interested in adding multiple Y Axes based on the examples provided below: script 1 script 2 Although I attempted to modify the code as shown below, it seems to not be functioning properly. function rdnum() { return Math.flo ...

javascriptdynamicdatasetchart.js

Responsive design is achieved through the use of mobile media

I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...

htmlcssmobileresponsive-design

Having trouble with the menu toggle button on Bootstrap 4?

When using Bootstrap 4, the breadcrumb button may not function properly when the header becomes responsive. I have ensured that Bootstrap 4 CSS and JS are included in the project. Please assist me in resolving this issue. Code: .navbar { height:100 ...

javascripthtmlcssbootstrap-4