I have this site that contains a slider the problem that is happening is that depending on the size of the screen the spacing between each slide changes, does anyone have any idea how to solve this?
I'm using the bxslider plugin. The certainty was to have a spacing of 14px, even setting and everything, depending on the resolution changes, for example, the resolution 1920x1080 is right, but if changing resolution gives problem.
How to proceed?
Create your responsive slide, it's much simpler and it avoids a lot of headaches.
/* Desktop maiores */
@media (min-width: 1200px) { ... }
/* tables em formato porta retrato até os desktos no formato paisagem */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* dispositivo em paisagem até os tablets em formato porta-retrato */
@media (max-width: 767px) { ... }
/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }
So you can reach a much larger audience and solve your problem, in case you do not understand in the place of ... you put your css using max-width as the basis of the resolution.
I think the spacing you are talking about is the padding property of CSS, so with this CSS code, you will have the correct spacing, but the correct one would be to learn to make the direct change in your plugin, you should look for the documentation of such bxslider and read to learn how to use it correctly.
If it is not this property that solves your problem, please explain in more detail what "spacing" you are talking about.
But I'm guessing it's one of the two codes below that solve your problem:
.slide_txt {
padding-left: 14px !important;
}
Or it would be this one:
.bxslider li {
margin-right: 14px !important;
}
The !important selector causes all other definitions of the same element and property to be ignored and makes it more important.