Slider not showing on mobile (I’ve read all previos topics)

Slider images doesn’t show on Mobile and Tablet. I searched all over the web. So far there are 3 solutions. One says a CSS item is the problem. There are no entries like “display:none” or “background: “xyz.img”. Second says it’s Javascript related. The only “errors” in my Firefox Console are:

Element.setCapture() is deprecated. Use Element.setPointerCapture() instead. For more help https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture

and

The resource at “https://kilicdekordunyasi.com/wp-content/astra-local-fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Third says it’s related to another plugin, mostly related to loding JS files. I only have Spectra, Smart Slider 3 and Starter Templates instelled; this WP is a fresh install.

The problem remains until I increase screen width to 922 in resposive mode.

There is an item in CSS for the below HTML item

<div class="n2-ss-slide-background" data-public-id="1" data-mode="fill">

whose style is

div#n2-ss-3 .n2-ss-slide-background {
transform: translateX(-100000px);
}

When I disable that transform, image shows in debugger (F12 window). But only 1 image show, slider doesn’t work. To test, I added this code as additional CSS:

div#n2-ss-3 .n2-ss-slide-background {
transform: none !important;
}

Desktop slider still works, but responsive versions just shows and image. Arrows or clicking thumbnails doesn’t change the image.

I watched your videos of responsive design. It’s not about that. I have no image at all. I’m using WP 6.2, anything new in this version to break your code? My theme is Astra and I’m using Generic starter template.

I’ve been working for hours and had to ask here. The CSS for “div#n2-ss-3 .n2-ss-slide-background” is not an actual CSS, it’s generated on index page. Firefox shows it on line 88 of index. It’s a long style element:

<style data-related="n2-ss-3">div#n2-ss-3 .n2-ss-slider-1{display:grid;position:relative;}div#n2-ss-3 .n2-ss-slider-2{display:grid;position:relative;overflow:hidden;padding:0px 0px 0px 0px;border:0px solid RGBA(62,62,62,1);border-radius:0px;background-clip:padding-box;background-repeat:repeat;background-position:50% 50%;background-size:cover;background-attachment:scroll;z-index:1;}div#n2-ss-3:not(.n2-ss-loaded) .n2-ss-slider-2{background-image:none !important;}div#n2-ss-3 .n2-ss-slider-3{display:grid;grid-template-areas:'cover';position:relative;overflow:hidden;z-index:10;}div#n2-ss-3 .n2-ss-slider-3 > *{grid-area:cover;}div#n2-ss-3 .n2-ss-slide-backgrounds,div#n2-ss-3 .n2-ss-slider-3 > .n2-ss-divider{position:relative;}div#n2-ss-3 .n2-ss-slide-backgrounds{z-index:10;}div#n2-ss-3 .n2-ss-slide-backgrounds > *{overflow:hidden;}div#n2-ss-3 .n2-ss-slide-background{transform:translateX(-100000px);}div#n2-ss-3 .n2-ss-slider-4{place-self:center;position:relative;width:100%;height:100%;z-index:20;display:grid;grid-template-areas:'slide';}div#n2-ss-3 .n2-ss-slider-4 > *{grid-area:slide;}div#n2-ss-3.n2-ss-full-page--constrain-ratio .n2-ss-slider-4{height:auto;}div#n2-ss-3 .n2-ss-slide{display:grid;place-items:center;grid-auto-columns:100%;position:relative;z-index:20;-webkit-backface-visibility:hidden;transform:translateX(-100000px);}div#n2-ss-3 .n2-ss-slide{perspective:1500px;}div#n2-ss-3 .n2-ss-slide-active{z-index:21;}.n2-ss-background-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;}div#n2-ss-3 .nextend-arrow{cursor:pointer;overflow:hidden;line-height:0 !important;z-index:18;-webkit-user-select:none;}div#n2-ss-3 .nextend-arrow img{position:relative;display:block;}div#n2-ss-3 .nextend-arrow img.n2-arrow-hover-img{display:none;}div#n2-ss-3 .nextend-arrow:FOCUS img.n2-arrow-hover-img,div#n2-ss-3 .nextend-arrow:HOVER img.n2-arrow-hover-img{display:inline;}div#n2-ss-3 .nextend-arrow:FOCUS img.n2-arrow-normal-img,div#n2-ss-3 .nextend-arrow:HOVER img.n2-arrow-normal-img{display:none;}div#n2-ss-3 .nextend-arrow-animated{overflow:hidden;}div#n2-ss-3 .nextend-arrow-animated > div{position:relative;}div#n2-ss-3 .nextend-arrow-animated .n2-active{position:absolute;}div#n2-ss-3 .nextend-arrow-animated-fade{transition:background 0.3s, opacity 0.4s;}div#n2-ss-3 .nextend-arrow-animated-horizontal > div{transition:all 0.4s;transform:none;}div#n2-ss-3 .nextend-arrow-animated-horizontal .n2-active{top:0;}div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-horizontal .n2-active{left:100%;}div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-horizontal .n2-active{right:100%;}div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-horizontal:HOVER > div,div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-horizontal:FOCUS > div{transform:translateX(-100%);}div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-horizontal:HOVER > div,div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-horizontal:FOCUS > div{transform:translateX(100%);}div#n2-ss-3 .nextend-arrow-animated-vertical > div{transition:all 0.4s;transform:none;}div#n2-ss-3 .nextend-arrow-animated-vertical .n2-active{left:0;}div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-vertical .n2-active{top:100%;}div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-vertical .n2-active{bottom:100%;}div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-vertical:HOVER > div,div#n2-ss-3 .nextend-arrow-previous.nextend-arrow-animated-vertical:FOCUS > div{transform:translateY(-100%);}div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-vertical:HOVER > div,div#n2-ss-3 .nextend-arrow-next.nextend-arrow-animated-vertical:FOCUS > div{transform:translateY(100%);}div#n2-ss-3 .n2-ss-control-bullet{visibility:hidden;text-align:center;justify-content:center;z-index:14;}div#n2-ss-3 .n2-ss-control-bullet--calculate-size{left:0 !important;}div#n2-ss-3 .n2-ss-control-bullet-horizontal.n2-ss-control-bullet-fullsize{width:100%;}div#n2-ss-3 .n2-ss-control-bullet-vertical.n2-ss-control-bullet-fullsize{height:100%;flex-flow:column;}div#n2-ss-3 .nextend-bullet-bar{display:inline-flex;vertical-align:top;visibility:visible;align-items:center;flex-wrap:wrap;}div#n2-ss-3 .n2-bar-justify-content-left{justify-content:flex-start;}div#n2-ss-3 .n2-bar-justify-content-center{justify-content:center;}div#n2-ss-3 .n2-bar-justify-content-right{justify-content:flex-end;}div#n2-ss-3 .n2-ss-control-bullet-vertical > .nextend-bullet-bar{flex-flow:column;}div#n2-ss-3 .n2-ss-control-bullet-fullsize > .nextend-bullet-bar{display:flex;}div#n2-ss-3 .n2-ss-control-bullet-horizontal.n2-ss-control-bullet-fullsize > .nextend-bullet-bar{flex:1 1 auto;}div#n2-ss-3 .n2-ss-control-bullet-vertical.n2-ss-control-bullet-fullsize > .nextend-bullet-bar{height:100%;}div#n2-ss-3 .nextend-bullet-bar .n2-bullet{cursor:pointer;transition:background-color 0.4s;}div#n2-ss-3 .nextend-bullet-bar .n2-bullet.n2-active{cursor:default;}div#n2-ss-3 div.n2-ss-bullet-thumbnail-container{position:absolute;z-index:10000000;}div#n2-ss-3 .n2-ss-bullet-thumbnail-container .n2-ss-bullet-thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;}div#n2-ss-3 .nextend-thumbnail{flex:0 0 auto;overflow:hidden;}div#n2-ss-3 .nextend-thumbnail-default{position:relative;display:flex;flex-direction:column;z-index:10;}div#n2-ss-3 .nextend-thumbnail-inner{position:relative;flex-basis:0;flex-grow:1;scroll-behavior:smooth;scrollbar-width:none;}div#n2-ss-3 .nextend-thumbnail-inner::-webkit-scrollbar{width:0;height:0;background:transparent;}div#n2-ss-3 .nextend-thumbnail-button{position:absolute;display:grid;place-content:center;transition:all 0.4s;cursor:pointer;visibility:hidden;}div#n2-ss-3 .nextend-thumbnail-button *{visibility:visible;}div#n2-ss-3 .nextend-thumbnail-scroller{display:grid;}div#n2-ss-3 .n2-thumbnail-dot{position:relative;cursor:pointer;}div#n2-ss-3 .n2-thumbnail-dot img{object-fit:cover;max-width:none !important;}div#n2-ss-3 .n2-caption-before{order:-1;}div#n2-ss-3 .n2-caption-overlay{position:absolute;box-sizing:border-box;display:grid;place-content:center;}div#n2-ss-3 .n2-thumbnail-dot-type{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);}div#n2-ss-3 .nextend-thumbnail-vertical .nextend-thumbnail-scroller{min-height:100%;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-align-content-start{align-content:flex-start;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-align-content-center{align-content:center;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-align-content-end{align-content:flex-end;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-align-content-space-between{align-content:space-between;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-align-content-space-around{align-content:space-around;}div#n2-ss-3 .nextend-thumbnail-vertical .nextend-thumbnail-inner{overflow-y:scroll;}div#n2-ss-3 .nextend-thumbnail-vertical .n2-thumbnail-dot{display:grid;grid-template-columns:auto 1fr;overflow:hidden;}div#n2-ss-3 .nextend-thumbnail-vertical .nextend-thumbnail-button{width:100%;}div#n2-ss-3 .nextend-thumbnail-vertical .nextend-thumbnail-previous{top:10px;}div#n2-ss-3 .nextend-thumbnail-vertical[data-has-previous="0"] .nextend-thumbnail-previous{transform:translateY(min(-100px,calc(-110%)));opacity:0;}div#n2-ss-3 .nextend-thumbnail-vertical .nextend-thumbnail-next{bottom:10px;}div#n2-ss-3 .nextend-thumbnail-vertical[data-has-next="0"] .nextend-thumbnail-next{transform:translateY(max(100px,calc(110%)));opacity:0;}div#n2-ss-3 .nextend-thumbnail-horizontal{flex-direction:row;}div#n2-ss-3 .nextend-thumbnail-horizontal .nextend-thumbnail-inner{overflow-x:scroll;}div#n2-ss-3 .nextend-thumbnail-horizontal .nextend-thumbnail-scroller{min-width:100%;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;grid-auto-flow:column;grid-auto-columns:min-content;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-align-content-start{justify-content:flex-start;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-align-content-center{justify-content:center;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-align-content-end{justify-content:flex-end;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-align-content-space-between{justify-content:space-between;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-align-content-space-around{justify-content:space-around;}div#n2-ss-3 .nextend-thumbnail-horizontal .n2-thumbnail-dot{display:grid;grid-template-rows:auto 1fr;overflow:hidden;}div#n2-ss-3 .nextend-thumbnail-horizontal .nextend-thumbnail-button{height:100%;}div#n2-ss-3 .nextend-thumbnail-horizontal .nextend-thumbnail-previous{left:10px;}div#n2-ss-3 .nextend-thumbnail-horizontal[data-has-previous="0"] .nextend-thumbnail-previous{transform:translateX(min(-100px,calc(-110%))) rotateZ(-90deg);opacity:0;}div#n2-ss-3 .nextend-thumbnail-horizontal .nextend-thumbnail-next{right:10px;}div#n2-ss-3 .nextend-thumbnail-horizontal[data-has-next="0"] .nextend-thumbnail-next{transform:translateX(max(100px,calc(110%))) rotateZ(-90deg);opacity:0;}div#n2-ss-3 .nextend-shadow{width:100%;z-index:0;}div#n2-ss-3 .nextend-shadow img{max-width:none;width:100%;}div#n2-ss-3 .n2-font-4c4d8caafd78beeffeb95315b8137798-hover{font-family: 'Roboto','Arial';color: #ffffff;font-size:250%;text-shadow: none;line-height: 1.5;font-weight: normal;font-style: normal;text-decoration: none;text-align: center;letter-spacing: normal;word-spacing: normal;text-transform: none;font-weight: 400;}div#n2-ss-3 .n2-style-419adb43199006cac9f8b1332249cc47-heading{background: #000000;opacity:0.7;padding:0px 0px 0px 0px ;box-shadow: none;border: 0px solid RGBA(0,0,0,1);border-radius:0px;}div#n2-ss-3 .n2-style-785355f374be86c332d4665aae819858-dot{background: RGBA(0,0,0,0.67);opacity:1;padding:5px 5px 5px 5px ;box-shadow: none;border: 0px solid RGBA(0,0,0,1);border-radius:50px;margin:4px;}div#n2-ss-3 .n2-style-785355f374be86c332d4665aae819858-dot.n2-active, div#n2-ss-3 .n2-style-785355f374be86c332d4665aae819858-dot:HOVER, div#n2-ss-3 .n2-style-785355f374be86c332d4665aae819858-dot:FOCUS{background: RGBA(29,129,249,1);}div#n2-ss-3 .n2-style-f58d52632d016e4532dc73de3ceef8d2-simple{background: #242424;opacity:1;padding:3px 3px 3px 3px ;box-shadow: none;border: 0px solid RGBA(0,0,0,1);border-radius:0px;}div#n2-ss-3 .n2-style-8ad5048b81c3c254e5a4ea951ba18f46-dot{background: RGBA(0,0,0,0);opacity:0.4;padding:0px 0px 0px 0px ;box-shadow: none;border: 0px solid RGBA(255,255,255,0);border-radius:0px;margin:3px;transition:all 0.4s;}div#n2-ss-3 .n2-style-8ad5048b81c3c254e5a4ea951ba18f46-dot.n2-active, div#n2-ss-3 .n2-style-8ad5048b81c3c254e5a4ea951ba18f46-dot:HOVER, div#n2-ss-3 .n2-style-8ad5048b81c3c254e5a4ea951ba18f46-dot:FOCUS{border: 0px solid RGBA(255,255,255,0.8);opacity:1;}div#n2-ss-3 .n-uc-LvMQgGK05U6q{padding:10px 10px 10px 10px}div#n2-ss-3 .n-uc-T2Jf2Eliszhs-inner{padding:10px 10px 10px 10px;justify-content:center}div#n2-ss-3 .n-uc-T2Jf2Eliszhs{align-self:center;}div#n2-ss-3 .n-uc-g4pwxkc2Ogsp{padding:10px 10px 10px 10px}div#n2-ss-3 .n-uc-rnRV7pgpkJQ7-inner{padding:10px 10px 10px 10px;justify-content:center}div#n2-ss-3 .n-uc-rnRV7pgpkJQ7{align-self:center;}div#n2-ss-3 .n-uc-4jZuZ4Wdjpyj{align-self:center;}div#n2-ss-3 .n-uc-zCua0oI0hXyp{padding:10px 10px 10px 10px}div#n2-ss-3 .n-uc-AJ4XJkb50goQ-inner{padding:10px 10px 10px 10px;justify-content:center}div#n2-ss-3 .n-uc-AJ4XJkb50goQ{align-self:center;}div#n2-ss-3 .n-uc-vWNWu0xPdGUk{align-self:center;}div#n2-ss-3 .nextend-arrow img{width: 32px}div#n2-ss-3 .n2-thumbnail-dot img{width:100px;height:60px}@media (min-width: 1200px){div#n2-ss-3 [data-hide-desktopportrait="1"]{display: none !important;}}@media (orientation: landscape) and (max-width: 1199px) and (min-width: 901px),(orientation: portrait) and (max-width: 1199px) and (min-width: 701px){div#n2-ss-3 .n-uc-vwATRXqQgqjk{--ssfont-scale:0.7}div#n2-ss-3 [data-hide-tabletportrait="1"]{display: none !important;}}@media (orientation: landscape) and (max-width: 900px),(orientation: portrait) and (max-width: 700px){div#n2-ss-3 .n-uc-vwATRXqQgqjk{align-self:center;;--ssfont-scale:0.5}div#n2-ss-3 [data-hide-mobileportrait="1"]{display: none !important;}div#n2-ss-3 .nextend-arrow img{width: 16px}}</style>

The page I need help with: [log in to see the link]