Search code examples
cssowl-carouselsquarespace

Owl carousel is breaking the page

Hi I used this Codepen for a client site (Squarespace). I tinkered a lot via CSS only.>

  1. Please check a specific client page; password is mmmm1234
  2. Scroll down and check "Discover Online Experiences" section where I implemented the slider
  3. For example, if viewed in a smaller screen size, like 1280px width, page breaks
  4. It breaks most especially in iPad versions
  5. Usually, if we put 4 or 5 cards only, it won't break the page
  6. But eventually we should be able to put more
  7. A contributor / developer from Squarespace couldn't help me about this and mentioend that maybe the owlcarousel itself had the problem
  8. Can anyone help me?

Below is the css and js of the one I used for client's


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" rel="stylesheet">

<style>

.uk-margin {
  padding: 0 !important;
  margin: 0 !important;
}
.uk-section {
  background-color: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.owl-carousel {
  position: relative;
  margin-top: 30px;
}
.owl-nav {
  position: absolute;
  top: -45px;
  right: 10px;
}
.uk-card-primary {
  border: none;
  border-radius: 0 0 13px 13px;
  background: none !important;
  background-color: none !important;
  color: none !important;
  margin: 0 5px 5px 5px !important;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%) !important;
  min-height: 114px !important;
}
.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px;
  min-height: 114px !important;
}
.owl-dots {
  margin-top: 0 !important;
}
.uk-card-title {
  margin: 0 0 15px 0 !important;
  color: black !important;
  font-size: 15px;
  line-height: 120%;
}
.crd-rate {
  margin: 0 !important;
  color: black !important;
  font-size: 13px;
  line-height: 120%;
}
#crd-rate {
  color: black !important;
  font-weight: 700 !important;
}
#dsc {
  margin: 0 0 15px 0 !important;
  color: #808080;
  font-size: .8em;
  line-height: 120%;
}
.uk-card-primary.uk-card-hover:hover {
  background-color: none !important;
  box-shadow: none !important;
  border: 1px solid #cecece;
}
.owl-stage {
  padding: 15px !important;
}
.uk-card-body {
  padding: 8px 10px 10px 10px !important;
}
.uk-link, a {
  color: inherit !important;
}

/*
----
Card Image
----
*/
.crd-img {
  padding: 5px 5px 0 5px; 
}
#crd-img {
  border-radius: 13px 13px 0 0; 
}

/*
----
Rate, Star, Reviews
----
*/

.d-flex1, .align-items-end1, .justify-content-between1 {
  text-align: left;
  word-wrap: break-word;
  box-sizing: border-box;
  margin: 0 !important;
}
.d-flex1 {
  display: flex !important;
}
.align-items-end1 {
  align-items: flex-start !important;
}
.justify-content-between1 {
  justify-content: flex-start !important;
}
#crd-rating, #crd-star, #crd-review {
  margin-right: 5px !important;
  font-size: 13px !important;
  color: black !important;
}
/*#crd-rating, #crd-review {
  margin-top: 2px !important;
}*/
#crd-rating {
  color: black !important;
  font-weight: 700 !important;
}
#crd-star {
  max-width: 20px !important;
  margin-top: -2px !important;
}
#crd-review {
  font-weight: 100 !important;
}

/*
----
Owl Carousel
----
*/

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
    color: black;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #808080;
    text-decoration: none; }
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px; }
.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; }
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #a7a7a7;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #cecece; }
.owl-item.active {
  margin: 0 !important;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<script>
  $('.owl-carousel').owlCarousel({
    loop:false,
  stagePadding: 15,
    margin:10,
    nav:true,
  navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
    responsive:{
        0:{
            items:2
        },
        640:{
            items:3
        },
      960:{
            items:4
        },
        1200:{
            items:5
        }
    }
})
</script>

enter image description here

enter image description here

Solution

  • UPDATED

    When the Owl carousel has a lot of elements, its owl-stage block becomes very wide and the carousel takes the full width of the screen from the parent boxes, which they are ready to yield to it.

    And among its parent blocks there is a block with the .content-wrapper class, which has the ability to become wider than the visible area of the screen.

    Class .page-section:not(.full-bleed-section)>.content-wrapper has CSS properties:

       box-sizing: content-box;
   padding-left: 30px;
   padding-right: 30px;

    Class .page-section>.content-wrapper has properties:

       box-sizing: content-box;
   max-width: 1363px;
   width: 100%;

    As a result we have 100% + 60px for the potential width of this block:
    https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.

    content-box gives you the default CSS box-sizing behavior.

    This is not noticeable on desktop while the max-width property is in effect. But on a narrow screen it ceases to constrain the width of the block and it goes beyond the border of the visible area. And then we see a horizontal scroll bar and an extra white area on the right side of the page layout.

    Solution 1: Define box-sizing: border-box; for this block. In this case, padding will be counted within 100% of the width, not added to them.

    screenshot

    Solution 2: If you need to use exactly box-sizing: content-box; here, you can take advantage of the fact that this block already has the display: flex; property and let it figure out on its own how much space it can provide for its content.

      flex-basis: 100%;
  width: 0;

    Both solutions work well when editing the site with the developer tools. They give reliable results for any screen width, as far as I could see.

    On the web page, you also need to pay attention to the CSS specificity in order for the new properties to work.