Offsetting columns with different results

Hi,

I am trying to get everything centered and lined up on a page I am working on and to do this I am using a 10 column div offsetted on both sides by one column divs.

This works perfectly well on the three tabs section of the page - Take a Tour, Our Menus, Our Sessions.

But on the slider section above it I cannot get the slider to line up in a central position by using the exact same method.

I’ve checked for negative or positive margins that might be putting it out of place but cannot find anything.

Any ideas why this might be happening ?

Thanks

PS: Disregard section below tabs - has to be tidied up

PROBLEM PAGE LINK

This is probably because of the widey wrapper (fixed width) and how layerslider calculates and sets inline styles.

And it seems Foundation Sites JavaScript is not initialized because you run the code in the head, this should be right before </body> after jQuery.

Bildschirmfoto 2020-05-23 um 21.01.39

Hi Daniel,

Thanks for your reply. I took off the fixed width on the wrapper and tried changing the initialization, but I’m still getting the same result.

I’m doing this to a deadline so I think I will do a quick fix on positioning the slider with margins, it’s not perfect but it will have to do for the moment.

When you say initialize, is this correct ?

<script type="text/javascript" src="<?php  bloginfo('template_url');  ?>/Javascript/vendor    
/jquery.js"></script>
<script type="text/javascript" src="<?php  bloginfo('template_url');  ?>/Javascript/vendor
/foundation.js"></script>

<?php  wp_footer();  ?>

<script>
$(document).foundation();
</script>
</body>

Thanks

Yes, that looks much better.