Jump to content

Image comparison slider cutting off background image- particularly on mobile.

Recommended Posts


I have used a ninjakit chrome extension in order to create an image slider that can be seen as the third image on this page. The issue I'm having is that I cant seem to get the slider to display both images at full width- particularly on mobile. 


I've tried setting the width & height manually in both the code block injection on the page and the custom CSS on my website- neither of which have worked. 


Current code block injection is:

<div id="ninja-elements" class="ix-block-ninja-custom-after-before"><div id="comparison"><figure style="background-image: url(&quot;https://i.postimg.cc/d361Qt1s/nike-dunks-green-on-backgroung.jpg&quot;); --ixaftercolor:#2788D800;" data-content=""><div id="handle"></div><div id="divisor" style="background-image: url(&quot;https://i.postimg.cc/8Cxfx5Fx/nike-dunks-outline.jpg&quot;); --ixbeforecolor:#FFFFFF00;" data-content=""></div></figure><input type="range" min="0" max="100" value="50" id="slider"></div></div>


website page is: https://www.carolinevickersdesigns.com/new-page-1-1-1-2-1-2-1-1


Edited by carolinevickers
included web url
Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.