# Slider sizes, content jumping - and serving different image sizes for mobile?

**URL:** <https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747>\
**Category:** Dazzling\
**Created:** [July 20, 2020, 1:39am UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747 "2020-07-20T01:39:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![baylands](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/bcef8e/32.png) [@baylands](https://colorlibsupport.com/u/baylands)\
**Post date:** [July 20, 2020, 1:39am UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/1 "2020-07-20T01:39:24Z")

</div>

Hello -

I have a few questions regarding the slider functionality in the Dazzling theme:  
I want to have the slider always show in a fixed aspect ratio (3.5:1). This gives me enough room to show nice pictures, and does not take up half the screen on a mobile device.

In my functions.php, I have set:  
add\_image\_size( ‘dazzling-featured-slider’, 1920, 550, true ); //for slider  
add\_image\_size( ‘dazzling-featured’, 750, 210, true ); //for posts

I have taken to uploading every picture for the slider as 3000x1000 and that works fine. However, when I upload something that is less than 1920 in width, it will enlarge the slider in height - which results in the content below jumping up and down with the size of the slider.

Is there a way to absolutely, once and forever, lock the size of the slider - so that I can upload pictures of whichever aspect ratio, without my content starting to skip?

Also, for these days, the slider size I picked appears big… What is, according to your experience, a good image size for the slider to use?

Last, but not least: When loading my homepage on a mobile device apparently I’m still loading the full-size images to the phone. Is there a way to make it serve smaller copies to mobile, ideally based on screen size?

(the website I am working on is [www.baylands.org](http://www.baylands.org))

Thanks a lot for your help!

Georg

---

<div class="post-metadata">

**Author:** ![david2658](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/0ea827/32.png) [@david2658](https://colorlibsupport.com/u/david2658)\
**Post date:** [May 6, 2024, 10:44am UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/2 "2024-05-06T10:44:02Z")

</div>

Hello,  
For the Dazzling theme’s slider:  
To lock the slider size 3.5:1 aspect ratio, adjust CSS for consistent height. Optimal image size is 1920x550px, experiment for best visual impact. Use wordpress’s responsive image feature to load smaller images on mobile, improving performance and data usage.

---

<div class="post-metadata">

**Author:** ![baylands](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/bcef8e/32.png) [@baylands](https://colorlibsupport.com/u/baylands)\
**Post date:** [May 6, 2024, 1:55pm UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/3 "2024-05-06T13:55:59Z")

</div>

Thank you!

What do I have to put into my CSS to make this happen?

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 6, 2024, 4:41pm UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/4 "2024-05-06T16:41:39Z")

</div>

Hey there,

I need to see your website URL to generate custom CSS, can you please provide it?

Regards,

---

<div class="post-metadata">

**Author:** ![baylands](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/bcef8e/32.png) [@baylands](https://colorlibsupport.com/u/baylands)\
**Post date:** [May 6, 2024, 11:48pm UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/5 "2024-05-06T23:48:31Z")

</div>

It is [www.baylands.org](http://www.baylands.org).

Thank you!

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 7, 2024, 12:01pm UTC](https://colorlibsupport.com/t/slider-sizes-content-jumping-and-serving-different-image-sizes-for-mobile/25747/6 "2024-05-07T12:01:18Z")

</div>

Hey there,

You can try this css code:

```auto
.flexslider {
    max-height: 450px;
}

```

Let me know how it goes.

Regards,