Serving Different Desktop and Mobile Images

[middlemann]

Hello,

Is there a way to serve up a different image for mobile VS desktop?
I would like to be able to do this with the background images for both the parallax sections and the full screen owl carousel sections.

Some of the images that look really good on desktop don’t display well on mobile so I would like to serve a different version of the image for mobile.

Please advise – thank you!

---

[Support]

THe easiest way to do that is creating custom classes for each element you want to change.

Example:

HTML:
Remove image-image and add a class, for example: bgImage1

<div class="owl-item position-relative pt-5 bgImage1" style="background-size: cover; background-position: center; background-color: #111;">

CSS:

.bgImage1 {
   background-image: url(path_to_image) !important;
}

@media screen and (min-width: 769px) {
  .bgImage1 {
    background-image: url(path_to_tablet_image) !important;
  }
}

@media screen and (min-width: 1200px) {
  .bgImage1 {
    background-image: url(path_to_desktop_image) !important;
  }
}

---

[middlemann]

I have a question about the Owl Carousels.
Do they default to the screen size?
Is there a way to make them expand in height beyond the default screen height to accommodate more content?

Right now if i add enough text it will get cut off at the bottom.
The carousels don’t expand vertically like a typical section does.

---

[Support]

Hi, you can add data-dynamic-height and set style also, here’s an example:

<div id="home" class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 7000}"  data-dynamic-height="['1200px','1000px','900px','750px','750px']" style="height: 1200px;">

It will set values for different resolutions, you can changes those numbers the way it will look better for your content.

---

[middlemann]

if it’s “dynamic” then it will display different on different screen resolutions right?
so how do I specify which height to display for a given screen resolution?

---

[Support]

data-dynamic-height="['1200px','1000px','900px','750px','750px']"

Fifth Value For Resolution < 575px

Fourth Value For Resolution > 575px and < 768px

Third Value For Resolution > 767px and < 992px

Second Value For Resolution > 991px and < 1200px

First Value For Resolution > 1199px

* You must change those values to match youor content.

---

• This reply was modified 4 days, 15 hours ago by Support.
• This reply was modified 4 days, 15 hours ago by Support.

[middlemann]

You sent me this:

<div id=”home” class=”owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0″ data-plugin-options=”{‘autoplayTimeout’: 7000}” data-dynamic-height=”[‘1200px’,’1000px’,’900px’,’750px’,’750px’]” style=”height: 1200px;”>

Are you saying that, [‘1200px’,’1000px’,’900px’,’750px’,’750px’] the ‘1200px” corresponds to >1199px and ‘1000px’ corresponds to >991px and <1200px and so on?

---

[Support]

Hello, yes, add those values and resize the browser to see how it works.

---

[Author]

Posts