Embed code css styles only for embed code

Design help General
1

Hello,
I wanna make sure that my styles that I load within the embed html code are only applicable for the part where my html script is inserted. Somehow also the position of the search button is affected by the html code…

https://preview.webflow.com/preview/bookthefizz?preview=60b91a45c121d6451d6bd3581474ff74

2

Ok you can’t do that (:

An HTML page has two main parts: head and body. Everything you see in the designer is already in the body.

Here is the code you’ve added:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <div data-role="rangeslider">
        <label for="price-min">Price:</label>
        <input type="range" name="price-min" id="price-min" value="200" min="350" max="800">
        <label for="price-max">Price:</label>
        <input type="range" name="price-max" id="price-max" value="800" min="350" max="800">
      </div>
       
    </form>
  </div>
</div> 

</body>
</html>

If you want to embed a full external webpage, you need to do it with an <iframe> tag but that’s not what you want to do I guess.

Your code isnt valid also, there’s a clising div right after your div that shopuld be an opening one.

The calls to jquery in the head section, you don’t need them, because Webflow calls them by itself.
You can paste this code:

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <div data-role="rangeslider">
        <label for="price-min">Price:</label>
        <input type="range" name="price-min" id="price-min" value="200" min="350" max="800">
        <label for="price-max">Price:</label>
        <input type="range" name="price-max" id="price-max" value="800" min="350" max="800">
      </div>
       
    </form>
  </div>

But then the link to demoform.asp won’t be valid. I suppose what you’re trying to do is to paste a form that has been created elsewhere…

3

Hey Vincent,
thanks for your fast answer.
Yes it’s just copied from another forum since I only wanted a range slider for this mockup page.
It only needs to function as a mockup so the values are not used as input afterwards. If I am adding your code I lose the begin and end range numbers which alter as soon as I move the slider. Do you maybe know why?

4

do you have a visual reference of what you want to do?

5

No. I don’t see a difference in the designer with preview.

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.