Tiny-slider: Weird margin issue at certain size

Created on 24 Jul 2018 · 3Comments · Source: ganlanyuan/tiny-slider

__Issue description__:

I have a really annoying issue, whereas the slider seems to go outside its boundaries at a certain size. It works fine:

< 1400px its a problem:

https://ibb.co/kMDrG8

> 1400px its fine:

https://ibb.co/gVVGio

(why can't we add images here directly? I've done it loads of times before on Github projects)

__Demo link/slider setting__:

https://www.athertonsltd.co.uk/new/testimonials.html

Config:

    var slider = tns({
        container: '.home-slider',
        items: 1,
        slideBy: 'page',
        autoplay: true,
        controls: false,
        nav: false
    });

HTML:

```

Having had Rich and his team do work for me in the past, I asked him if he could design me an oak log store to match my new oak framed garage. He discussed the design with me and came up with a very reasonable quote. He made me the most beautiful log store with lovely oak beams and curved braces and a tile roof. He and his apprentice cut all the oak to size on site, dug out small foundations for the uprights onto which they built small brick piers to support the oak uprights. It took three days. They tidied up, so it looked like they hadn't even been there. I have no hesitation to recommend him.

Some Person | Location here

                <div class="slide">
                    <div class="inner-slide">
                        <div class="inner-img">
                            <img src="/new/2018/testimonial-images/shot1.png" alt="">
                        </div>
                        <div class="review">
                            <div class="comment">Having had Rich and his team do work for me in the past, I asked him if he could design me an oak log store to match my new oak framed garage. He discussed the design with me and came up with a very reasonable quote. He made me the most beautiful log store with lovely oak beams and curved braces and a tile roof. He and his apprentice cut all the oak to size on site, dug out small foundations for the uprights onto which they built small brick piers to support the oak uprights. It took three days. They tidied up, so it looked like they hadn't even been there. I have no hesitation to recommend him.</div>
                            <div class="person">Some Person | <span>Location here</span></div>
                        </div>
                    </div>
                </div>


            </div>
        </div>


**SCSS:**

slider-wrapper {

display: flex;
justify-content: center;
background: blue;

.tns-outer {
    button {
        display: none;
    }
}

.home-slider {

    background:yellow;

    .slide  {
        position: relative;


        .inner-slide {

            margin-left: 1.4rem;
            margin-right: 1.4rem;

            @include mq($from: sm) {
                display: flex;
                justify-content: space-between;
            }

            .inner-img {
                width: 100%;
                display: flex;
                justify-content: center;
                flex-grow: 0;
                img {
                    max-width: 100%;
                }
            }

            .review {
                flex-grow: 1;
                .comment {
                    position: relative;
                    padding-left: 2.5rem;
                    padding-right: 2.5rem;
                    padding-top: .5rem;

                    &:before {
                        left: 0;
                        content: "\201C";
                        position: absolute;
                        font-size: 80px;
                        line-height: 1;
                        color: #999;
                        font-style: normal;
                    }

                    &:after {
                        content: "\201D";
                        position: absolute;
                        font-size: 80px;
                        line-height: 1;
                        color: #999;
                        font-style: normal;
                        right: 0px;
                    }
                }
                .person {
                    margin-top: .5rem;
                    font-weight: bold;
                    padding-left: 2.5rem;

                    span {
                        color: #333;
                        font-weight: normal;
                    }
                }
            }
        }
    }


}

}
```

_Tiny-slider version_: 2.8.2
_Browser name && version_: All browsers it seems

I've been going round and round in circles with this for the last couple of hours, and I still can't see whats going on. Maybe a fresh pair of eyes could see my boo-boo? :)

question

Source

youradds

Most helpful comment

Hi,
You can fix this either by removing #slider-wrapper { display: flex; }
or adding .tns-horizontal.tns-subpixel { white-space: normal !important; }

ganlanyuan on 24 Jul 2018

👍2

All 3 comments

Hi,
You can fix this either by removing #slider-wrapper { display: flex; }
or adding .tns-horizontal.tns-subpixel { white-space: normal !important; }

ganlanyuan on 24 Jul 2018

👍2

Ah you star - not sure how I missed removing the flex part in the wrapper! That works like a charm now :)

youradds on 25 Jul 2018

Glad to hear it works.

ganlanyuan on 25 Jul 2018

Was this page helpful?

0 / 5 - 0 ratings