How to make images responsive?

Hello,

How can I make my images responsive depending on the device my website is being looked at on?

As of right now, my homepage slider images are not responsive. How can I fix this issue?

Thanks.

Hello,

In order to gain more control over the pictures in response, you need to define it via page builder (not via the background of the slider) so in such case, you can set any size for an image or also move it.

You can read our documentation on how to create a slider:

https://xtemos.com/docs-topic/how-to-create-a-slider/

Kind Regards

How do I make it responsive tho?

When someone is on a laptop the images get cut off, when they’re using a desktop with a larger screen it doesn’t get cut off.

How can I make images responsive automatically?

Hello,

On a laptop, the images get cut off because they are defined via the background of the slide and that also has the “Background-size: Cover” option which does not always show the whole image.

https://gyazo.com/c5bdb7502e17cbd7d0f2a77f41cdc76b

In this case, if you will define the “Contain” value for the “Background-size”, the background image will always be full width but the slide will appear a little bit different.

Therefore those parts which are cut off you should create them in the page builder, e.g if such parts will be in the column that has some indentation then they will not be cut.

https://gyazo.com/e34c7559063425733ef78e218c9b8114

https://gyazo.com/f247635d587094d6b017971dba17acb7

Here is a little example:

https://monosnap.com/file/EbDFKHnLWZRz8WgR8tZtFSnWJ2R9y9

I hope this helps!

Kind Regards

Hi Luke,

Unfortunately this did not help my situation.

I understand why you are recommended that I use the page builder for my text etc, however, when I do this it doesn’t align to where I’d like my text, etc. to appear.

Is there not an easier way to make the image responsive? Please help me as much as you can.

Thanks kindly.

My main issue is the viewing experience from Desktop -> Laptop.

I think I’ve got the tablet and mobile all worked out, but when someone is on a laptop the slider cuts off my images.

Thanks.

This site here, https://www.shaalis.com/ is a prime example of what I’d like my site to behave as.

Thanks.

Hello,

You can try to define the image via the background of the section in the page builder, in this case, such an image will not be cut off. Unfortunately, there is no other way to define the image via background that would not be cut off.

I have inspected the slider from the site example, they are using another slider that is related to the third-party plugins (check the below link).

https://ru.wordpress.org/plugins/smart-slider-3/

If there’s anything else we can do, please get in touch.

Kind Regards

Hi Luke,

Could you please assist me with defining the image via the background of the section in the page builder?

Can you please show me what this means?

Honestly, I’d much rather use the Woodsmart slider than an alternative plugin. I just need to figure out how to make sure on laptops it won’t get cut off.

If you could please show/help me with what I’m supposed to be doing that would be amazing.

Thanks.

Within the page builder itself, I only have the option to adjust desktop, tablet, and mobile.

https://gyazo.com/f8f9686c174c6699de9486c6c2120867

This is the same within the slider dashboard. I don’t have the option for laptop devices.

https://gyazo.com/1a0e64d28f6ab0442a9d6504c396e6aa

How do I adjust for laptop devices?

Making the slider responsive is the last step before I make my site live, if you could PLEASE PLEASE assist me with this and go into detail as to what I need to do I will be FOREVER thankful!

Thanks.

Please assist me with this.

As I said, this is currently one of the only things holding me back from releasing my site to the public.

I need my slider to be responsive to laptops.

Please and thank you.

Hello,

I tried to customize the slider (Retail slide 3) but unfortunately, it is still circumcised on the laptop. The reason is that our slider is not designed to do a responsive to the picture that is in the background (I mean a picture like yours). In this case, will be the best solution to create such a slider using e.g “Slider Revolution” or “Smart Slider 3” which have a powerful toolbar and also they are fully compatible with our theme.

I sincerely appreciate your understanding in this matter. Please feel free to reach out to me if you have any further questions.

Kind Regards

Do you know how to make a single image responsive on Smart Slider 3?

I had previously set up Slider Revolution but it was glitching and would eventually just turn completely white. Any suggestions for this fix?

Thanks.

Hello,

Here is a tutorial for the “Smart Slider 3” which also describes how to make the slider responsive.

https://smartslider.helpscoutdocs.com/category/1697-tutorials

In order to know whether our issue with the glitch of the “Slider Revolution” is it or not you need to check it on some default theme like Twenty-Twenty.

Also, I suggest you import some demo pages where is “Slider Revolution” and check the settings that were applied there for a better understanding.

By following the link below you will get acquainted with the responsive settings of the “Slider Revolution”.

https://www.sliderrevolution.com/documentation/responsive-settings/

Kind Regards

[Author]

Posts