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

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)

Thanks a lot for your help!

Georg

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.

Thank you!

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

Hey there,

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

Regards,

It is www.baylands.org.

Thank you!

Hey there,

You can try this css code:

.flexslider {
    max-height: 450px;
}

Let me know how it goes.

Regards,