0

I am doing a website for a dental clinic and I want to make a image slider comparison. I did it with juxtaposeJS.knightlab.com and embed the code in my Google site, but I don't know how to remove the scroll bar despite I have adjusted its height. Also, it loos horrible in mobile preview.

the image is a screenshot of how it looks in preview mode

This is the html code:

<iframe frameborder="0" class="juxtapose" width="100%" height="332"
<iframe src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>

I tried Googling for other solutions I found here and on other websites but it's either the scroll bar remains there or the image disappeared after editing the HTML code.

TylerH
  • 20,799
  • 66
  • 75
  • 101
sani
  • 1
  • 1

2 Answers2

0

The code provided in the original question is not legitimate HTML, which I suspect is most of the issue. The easiest way to fix this is probably just to give the iframe a height that is sufficient for the contained content, like this:

<iframe src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862" frameborder="0" height="183"></iframe>

By default, iframes have a height of 150px, and since the image you are embedding has a hard-coded height of 183px, you are getting a scrollbar.

Alternatively, you could opt for a more dynamic JS solution, such as the one presented in this question

Jake
  • 862
  • 6
  • 10
  • Thank you! This worked. Though the scroll bar still shows up in the mobile preview. Is there a way to solve this? – sani Mar 21 '23 at 03:31
-1

Just add scrolling="no" in the second iframe:

<iframe frameborder="0" class="juxtapose" width="100%" height="332"> </iframe>
<iframe scrolling="no" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>
francisco
  • 1,387
  • 2
  • 12
  • 23
Merabi Bauzhadze
  • 1
  • 2