Revolution slider

[Anderson Rocha]

When changing the image slider revolution she did not adapt to different screen sizes. Only works in fullscreen. Can you tell me if I messed up some setting?

Thank you
Anderson

---

[Support]

Hello, please add the attributes in the IMG tag, like this:

<img src="path-to-image.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

More information in the Revolution Slider documentation included in the template package.

Thanks.

---

[Anderson Rocha]

Tried as per your advice, but now the image is aligned left and can not adjust to different screen sizes of each device. I’ve read all the documentation but I could not find where to fix this mess.

Thank you
Anderson

---

[JiffiDesign]

I have a similar problem and the proposed fix does not work. The slides seem to be dramatically reduced in size on smaller devices and, in an attempt to get around the problem, I chose to put the text on transparent-background slides instead. However, although I specified 100% width on the tag, the slides are still resized.

I’ve had a look at the documentation for Revolution Slider, but although it does state that 100% width is possible via data-bgfit, there’s no specific example of how this is achieved. Taking hints from other sections of code, I tried data-bgfit=”width:100%” and also data-bgfit='{“width”:100%}’, but neither works.

Generally, I would have thought the CSS would have been laid out much more sensibly with the Porto template given its popularity. I’m finding it very laborious, but perhaps the forums will offer some time-saving fixes.

TIA

---

[Support]

Hello,

Ok, I just published in a temporary URL 2 tests using the latest version of the template that I think it’s what you are looking for, please check the links:

1) http://okler.net/tests/slides/index.html – This is a test with the default slide height, using the image that you provided and with the following HTML:

<div class="slider" id="revolutionSlider" data-plugin-revolution-slider data-plugin-options='{"startheight": 500}'>
	<ul>
		<li data-transition="fade" data-slotamount="13" data-masterspeed="300" style="background-color: #2793FF;">

			<img src="slide-bg-full.jpg" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">

2) http://okler.net/tests/slides/index2.html – This is a test with fullScreen set to on, using the image that you provided and with the following HTML:

<div class="slider" id="revolutionSlider" data-plugin-revolution-slider data-plugin-options='{"startheight": 500, "fullScreen": "on"}'>
	<ul>
		<li data-transition="fade" data-slotamount="13" data-masterspeed="300" style="background-color: #2793FF;">
				
			<img src="slide-bg-full.jpg" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">

Both samples the image resizes in smaller resolutions.

In the Revolution Slider the idea of the image is to be a “background” image, using a pattern, or something like that, and also adding another elements (captions).

I’m sorry if it’s not exactly what you’re looking for, if so, let me know if you need any extra information. 🙂

Thanks.

---

[JiffiDesign]

Hi,

Thank you for your reply. The problem I’m having is not with the background image for each slide, it’s with the slide’s contents being resized. Let me explain… Rather than having individual lines of text for which I have to specify x/y start points, I chose to put each line of text on a separate, transparent slide in order to eliminate any issues on smaller screens. Here is my code:

<div role="main" class="main">
  <div role="main" class="main">
    <div class="slider-container">
        <div class="slider" id="revolutionSlider" data-plugin-revolution-slider data-plugin-options='{"startheight": 500;}'>
            <ul>
                <li data-transition="fade" data-slotamount="3" data-masterspeed="300" >
    
                    <img src="img/slides/slide01_background.png" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
    
                    <div class="tp-caption top-label lfl stl"
                         data-x="center"
                         data-y="center"
                         data-speed="300"
                         data-start="500"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image01.png" width="100%"></div>
    
                    <div class="tp-caption main-label sft stb"
                         data-x="center"
                         data-y="center"
                         data-speed="300"
                         data-start="1500"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image02.png" width="100%"></div>
    
                    <div class="tp-caption bottom-label sft stb"
                         data-x="center"
                         data-y="center"
                         data-speed="500"
                         data-start="2000"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image03.png" width="100%"></div>
                         
                </li>
                <li data-transition="fade" data-slotamount="3" data-masterspeed="300" >
    
                    <img src="img/slides/slide01_background.png" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
    
                    <div class="tp-caption top-label lfl stl"
                         data-x="center"
                         data-y="center"
                         data-speed="300"
                         data-start="500"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image04.png" width="100%"></div>
    
                    <div class="tp-caption main-label sft stb"
                         data-x="center"
                         data-y="center"
                         data-speed="300"
                         data-start="1500"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image05.png" width="100%"></div>
    
                    <div class="tp-caption bottom-label sft stb"
                         data-x="center"
                         data-y="center"
                         data-speed="500"
                         data-start="2000"
                         data-easing="easeOutExpo"><img src="img/slides/slide01_image06.png" width="100%"></div>
                         
                </li>
            </ul>
        </div>
    </div>

As I said before, I have tried tweaking the data-bgfit options without success, so the code above is my original attempt. I may be wrong, but I’m assuming there’s something somewhere in the code which is resizing the images on smaller devices. If not, why is the width="100%" working on large screens, but being ignored on smaller screens?

Any help would be greatfully appreciated 🙂

---

[Support]

Hello @jiffidesign, the captions being resized is the default behavior from the Revolution Slider, it’s calculated via JS and set width/height dynamically.

The only way to fix the size of the images in small resolutions is with an extra class that must be added in each image tag.

For example:

(css/custom.css)

@media (max-width: 992px) {
	.my-slide-image {
		width: 300px !important;
		height: 200px !important;
	}
}

@media (max-width: 479px) {
	.my-slide-image {
		width: 100px !important;
		height: 80px !important;
	}
}

I hope it helps.

Let me know if you have any other question.

Thanks.

---

[JiffiDesign]

Hi,

Thanks again for your reply. The proposed fix didn’t solve the problem though – the images were still around 50% of their intended size. Is there something missing?

Kevin

---

[Support]

Can you please open a new ticket and send us the URL so we can take a look?

Thanks.

---

[JiffiDesign]

Hi,

I’ve tinkered with the code you sent me and have managed to get it working fairly well. Here’s what I’ve done:

/* Fixes slide widths of smaller screens */
.my-slide-image {
width: 100%;
}
@media (max-width: 992px) {
.my-slide-image {
width: 600px !important;
height: 256px !important;
}
}

@media (max-width: 479px) {
.my-slide-image {
width: 300px !important;
height: 129px !important;
}
}

I think the main thing was preserving the aspect ratio, but I also boosted the widths so that the slides are closer to 100% of the viewport. Here is the link to the site I’m working on if you want to have a look: http://www.bagpiper-online.co.uk/redesign/index.php

Thanks for your help 🙂

– Kevin

---

[Support]

Hello, for me it’s looking awesome!

I really like that slider style you created, and I think the images are visible in all resolution now.

Let me know if you have any questions.

Thanks.

---

[Anderson Rocha]

good night

Unfortunately none of your tips worked. This is simply not suitable for smaller screen. I tried all possible ways and nothing. I confess I enjoyed the template but I can not do the image is suitable for smaller devices such as a cell for example.
Is there anything else I can do? Really really need your help.

Thank you

Anderson

---

[Support]

Hello @Anderson, are you using the latest version of the theme?

Did you see the samples that I published with the latest version an a few changes?
http://okler.net/tests/slides/index.html
http://okler.net/tests/slides/index2.html

Isn’t that what you’re looking for? 🙂

Kind Regards

---

[Author]

Posts