Webflow published site is reordering layout for some reason

Design help General
1

My site looks fine in the preview and designer. Yet when i published one div has been moved and nested into another div. I have no idea why but when i inspect and move the div back into its place the page looks normal at least most of it does.

Edit. The read only site also looks different and is not behaving the same way as in the preview. The images are not rotating and moving on scroll and the text header section is not shrinking, the nav bar is not animating on scroll.

Here is my site Read-Only: Webflow - Stratis
(how to share your site Read-Only link)

2

Hi @montgomo01,

Looks like you’re missing a > in your ‘btn-icon-leading’ HTML Embed to close out the SVG:

CleanShot 2022-10-10 at 11.33.59@2x
CleanShot 2022-10-10 at 11.33.59@2x1920×1238 124 KB

Try adding this >, republish and see if this fixes the issue!

3

wow that was it! How did you know to check that? i would have never have thought that. Also, that is really werid, why would it be nested divs inside each other based on that. Wouldnt it just mess up the icon instead of the entire page?

Thanks a lot anyways youve save me ripping my hair out

4

Hi @montgomo01,

I’ve seen that a few times before so I always check HTML embeds/Page Settings > Custom Code for missing closing tags (usually it’s </style> or </script> missing).

I think it basically messes up the DOM ordering/nesting!

5

Will do. Actually i have another issue im trying to solve regarding slidejs.Im trying to implement a slider for my pricing tiers so that on mobile or tablet you can just swipe to see all tiers. im having a lot of trouble getting it to work. Do you know anything about that>

6

Would be happy to take a look for you if you send through a read-only and code snippet!

7

Read only

so this is the css styling in the header

<style>
/* the slides */
.slick-slide {
    margin: 0 24px;
  min-width:400px;
  height: 100%;
}
/* the parent */
.slick-list {
    margin: 0 -10px;
    overflow: visible;
    background-color: #000000;
    width:100%;
}

</style>

and this is the body code:


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	
    <script>
    $(".pricing-tiers").slick({

  // normal options...
  infinite: false,
   slidesToShow: 3,
  slidesToScroll: 1,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true,
        
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});


</script>

All i want is for the items to be able to roll off the screen on mobile and tablet, so i actually just duplicated the section and hid it on desktop and then on mobile have the pricing be slide.js because i just couldnt make it work on both sizes

8

Hi @montgomo01,

Try removing these lines from your code:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

jQuery is already loaded by Webflow by default so you don’t need to load again and the third line is when you’re not using a CDN and will return a 404 error.

So try replacing your slick script with this and republish:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	
    <script>
    $(".pricing-tiers").slick({

  // normal options...
  infinite: false,
   slidesToShow: 3,
  slidesToScroll: 1,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true,
        
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});


</script>
9

awesome thanks so much, i also had to add a variable width property to be able to style the slides. which has now worked so that on desktop there is no interaction but on the tablet the slides are off the screens lightly and so you can clearly see that theres multiple items. before it was maxing the width so it didnt really look like any more slides where there!

  <script>
    $(".pricing-tiers").slick({

  // normal options...
  infinite: false,
   slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true,
1 Like