Height of Owl Carousel on mobile devices

On my desktop, I have an image that covers the entire screen using Owl Carousel.

However, when viewed on a phone device, the same image only takes up one-third of the screen size.

How can I adjust the height so that it appears taller on a phone?

I've attempted to find solutions through various threads but being new to Owl Carousel, I'm unsure if I've made any mistakes. I couldn't locate this specific class here and am feeling lost.

My current configuration for Owl Carousel is as follows:

items: 1,
smartSpeed: 1000,
autoplay: true,
autoplayTimeout: 6000,
dots: false,
loop: true,
mouseDrag: false,
autoHeight: false,
touchDrag: false,
autoHeight: true

Owl Carousel version: v2.3.4

CSS Used (Link to CSS)

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
 (CSS styles omitted for brevity)

Answer №1

As per my understanding, you are looking to have a container that spans full height and width on both Desktop and Mobile using Owl Carousel.

I have created a Pen to assist you in achieving your goal with Owl Carousel - although I am not very familiar with it since I no longer use Carousels frequently, it can be a helpful solution for carousels!

https://codepen.io/kurtis-rogers/full/NozyEz

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Owl Carousel 2 Example</title>
</head>
<body>
  <div class="owl-carousel">
    <div class="post-content-parent">
      <div class="c--post-content-image-wrapper"></div>
      <div class="post-content-text-child">
        <div class="post-content--inner">
          <h2>Slider 1</h2>
          <p>Some information about slider 1</p>
        </div>
        <input type="button" value="Read more">
      </div>
    </div>
    <div class="post-content-parent">
      <div class="c--post-content-image-wrapper"></div>
      <div class="post-content-text-child">
        <div class="post-content--inner">
          <h2>Slider 1</h2>
          <p>Some information about slider 1</p>
        </div>
        <input type="button" value="Read more">
      </div>
    </div>
  </div>
</body>
</html>

CSS(SCSS):

body, html{
  padding: 0;
  margin: 0;
}

.owl-carousel, .owl-stage-outer {
  max-height: 100%;
  height: 100vh;
}

// Parent container for the images and text
.post-content-parent{
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
}

// Post content image styles
.c--post-content-image-wrapper{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  bottom: 0;
  background: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

// Post text content
.post-content-text-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  .post-content--inner {
    padding-left: 20px;
  }
  h2 {
    font-family: Arial, sans-serif;
    font-weight: lighter;
  }
  h2, p {
    margin: 0;
  }
  input[type="button"] {
    margin-right: 20px;
  }
}

JavaScript:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    loop: true,
    items: 1,
    center: true,
    lazyLoad: true,
    dots: false
  });
});

If you require any assistance with this, feel free to reach out :)

Answer №2

The issue you are encountering is due to the differing aspect ratios of desktop and mobile screens.

An effective solution would be to utilize two distinct sets of images tailored specifically for desktop and mobile viewing. Consider displaying landscape-oriented images for desktop users and portrait-oriented images for mobile users.

To implement this, you can explore using the HTML picture element which allows you to showcase different images based on the user's device: https://www.w3schools.com/tags/tag_picture.asp

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

Mastering the Art of Absolute Positioning in HTML Tables' Header Row

I have a table with 80 rows. How can I make the first row fixed? I attempted to add position: fixed; to the but unfortunately, it didn't work. Is there a way to achieve this using CSS or jQuery? <table> <thead> <tr> <td sty ...

Incorporate gulp-clean-css into the current gulpfile.js

I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...

When you zoom in, the HTML elements tend to shift out of place

Spent the entire day yesterday attempting to make my page responsive while Zooming In, but I just can't seem to get it right. Even after adding height and weight, elements still get mixed up when zooming in on the page. I've scoured countless w ...

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

Is there a way to customize the color of a React component from a different source?

I am currently utilizing a React component library called vertical-timeline-component-react. <Fragment> <Timeline> <Content> <ContentYear startMonth="12" monthType="t ...

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

Rearranging the layout of elements: CSS switches up the text and button,

Having an issue. I created a background image with gradient colors for my web project and clipped it. Within this element, there is text and a button that I want to be centered inside the element - with the text above and the button below. Initially, ever ...

Make sure the div is always positioned above everything, including any built-in pop-up windows

When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

What is the best way to place an icon in the center of a Bootstrap 5 card image?

I'm looking to center an icon within a bootstrap-5 card image. I have an icon that I want to display at the center of my card image, but I'm unsure how to achieve this using either CSS or Bootstrap-5. Can anyone provide guidance on how to accompl ...

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

I am in need of assistance with coding (I am still learning, so please excuse any syntax errors). What I am trying to achieve is having two buttons (button A and button B) that can toggle the visibility of their respective divs (div A and div B), which sh ...

What is the best way to determine the accurate size of a div's content?

There are 2 blocks, and the first one has a click handler that assigns the block's scrollWidth to its width property. There is no padding or borders, but when the property is assigned, one word wraps to the next line. The issue seems to be that scrol ...

No JavaScript needed for this CSS framework

I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...

Setting up automatic CSS linting in a Vue.js project for seamless correction

Is there a way to enforce linting on the <style> segment within a .vue file while coding? I have set up eslint (with airbnb ruleset)+prettier for the <template> and <script> sections, which includes some auto-correction upon saving, but I ...

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

Swipe horizontally on mobile devices with text scrolling

I stumbled upon a workaround online that effectively allows for horizontal scrolling on mobile devices. <div style="max-width: 1024px; margin: auto; "> <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-sc ...

Struggling to center divs in HTML and CSS but running into issues on mobile devices?

I've been facing some serious CSS issues lately! Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narr ...

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...