SLIDER – RESPONSIVE AND RESIZE
-
Good morning
We do have problems with the slider and with the image in the slider.
We would like that the image is fully visible without being cutted during the resize of the window and when using devices different from pc.
We also would like to know how to remove buttons of the slider and how to have just one fixed slide image.
Thank you in advance
-
Hello,@santinocabras!
If you want just fixed image without buttons on it, you don’t need to use the slider for that.
Use the Header image instead (Customising ▸ Header ▸ Header Image)Regards
The slider offers more than the header image: we need the button of the slider and the text in it (one layer over the image), if there is a solution to put a button and a text over the header image i would be happy to know it, and the header image would be a pèrfect solution, thanks
one last detail about buttons… wedo not need the button in the right and the button in the left, we DO need the button in the centre.
Hello,
If you still want to use the button and text, the slider is a better solution.
In order to have the “fixed” slide image, you can place the same image on both sliders…Can you give me an address to your website?
the adress of our website is https://hotelsalesmanager.it/ (but we solved almost all the problems by ourselves) the last standing problem is that the image in the slayer stops beducing its size in the smartphone device responsive mode… it seems that the height cannot be less than 300 and so the shoulder of the model is cut in the picture…of all the problems we listed in the beginning just one is standing: smartphone vertical, how to not make the image being cut?
moving the image to the left would also be a good solution instead of resizing it…
Hello,@santinocabras!
Unfortunately, your website is currently under construction mode so I can’t see the slider. Please let me know when the site is alive and I’ll give you the right code to solve that.
Regards
Hello,@santinocabras!
Try to insert the following code into Customizing->General->Additional CSS:
@media only screen and (max-width:480px) { .slide-content { background-position: 70% center!important; } }Regards
The site is now not under construction.
Your code worked perfectly… simply perfectly…
thank you! thank you! thank you!we do have one problem with the slide change… (we thought we had fixed it but it is still there…) now our slides chage every 70 seconds… we put 7 millions seconds of delay time but the maximum delay time seems to be just is 70 seconds… is it possible to make them stop completely from sliding?
Hi, @santinocabras!
Since you actually don’t use the slider, you can freely remove the sliders.
.slide-content slide-1, .slide-content slide-2{ display:none!important; }Regards
I removed the second slide and i inserted the custom css but it seems to show a white page blink instead of a firm slide number 1.
And.. this morning this command stopped working…
apparently without reason…@media only screen and (max-width:480px) {
.slide-content {
background-position: 70% center!important;
}
}Hello,@santinocabras!
Your code has stopped working because you have edited(changed or deleted) your other custom codes that were associated with it.
According to the current settings, the following code should help you:@media (max-width:480px) { .cameraSlide img{ left: 50%!important; margin-left: -450px!important; } }Regards
My fault, and sorry for the inconvenient, we are still working on the css…
Regarding the opportunity to stop the animation of the text and the button of the slider, do you have any suggestion…?Hello,@santinocabras!
To do this, it is necessary to change some core theme files, which I do not recommend to you. After all, why do you even use a slider to get a static image? Instead of a slider, it’s easier to do with the Elementor Page builder plugin that we recommend installing with the theme. Please check out the video guide that I did for you.
Regards
The topic ‘SLIDER – RESPONSIVE AND RESIZE’ is closed to new replies.
