How to fix bottom slider issue on OpenCart 3

In this article, I will share a little trick, how to fix bottom slider whitespace on OpenCart 3, like in the picture below.


How to fix bottom slider issue on OpenCart 3

Open cPanel and go to the folder /catalog/view/theme/default/stylesheet/stylesheet.css. Copy/paste the code below:

/* Bottom slider whitespace fix */
@media (min-width: 960px) {
    .swiper-viewport > #carousel0 > .swiper-wrapper > .swiper-slide > .img-responsive {
      margin-left: 22%;
    }

We have successfully corrected this small problem! Note if you are linking the images to specific URL, then use this code instead:

/* Bottom slider whitespace fix */
@media (min-width: 960px) {
    .swiper-viewport > #carousel0 > .swiper-wrapper > .swiper-slide > a > .img-responsive {
      margin-left: 22%;
    }

How to fix bottom slider whitespace on OpenCart 3

Back to Blog