Spacing between Ivs overlaps

Question

I have this site containing a slider the problem that is happening is that depending on the size of the screen the spacing between each slide changes, someone has some idea of how to solve this?

I’m using the plugin bxslider. The right was to have a spacing of 14px, even defining and everything, depending on the resolution changes, for example in the resolution 1920x1080 It’s okay, but if you change the resolution it’s a problem.

How to proceed?

Answer 1

Create your responsive slide, it’s much simpler and avoids too much headache.

/* 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 don’t understand in place of ... you put your css using max-width as a base in the resolution.

Answer 2

I believe the spacing you’re talking about is the property padding CSS, so with this CSS code, you will have the correct spacing, however the correct would be to learn how to make the change directly in your plugin, you should look for the documentation of such bxslider and read to learn how to use it properly.

If it is not this property that solves your problem, please explain in more detail what "spacing" you are talking about.

But I am deducing that it is one of the two codes below that solve your problem:

.slide_txt {
    padding-left: 14px !important;
}

Or would this be it:

.bxslider li {
  margin-right: 14px !important;
}

The selector !important causes all other definitions of the same element and same property to be ignored and makes this the most important.