Narrative theme - product page Add to cart button (product form) keeps moving when scrolling down

Highlighted
New Member
5 0 0

Hi guys, I've successfully changed the product page in the Narrative theme to display the images on the left and buttons as well as product description on the right.

When opening the product page, everything looks the way I want it to be:

product page 1.PNG However, once you scroll down, the product item selectors and Add to cart button are moving down as well and are layering on top of the product description. So in the end, you can't read the product description properly. It all works fine on mobile but I just can't get it to work on desktop:

product page 2.PNG

I thought this might have something to do with the display-flexbox style but am not sure.

Here's the CSS I currently use for this section:

.product__content {
  padding-bottom: $gutter * 4;
}
 
.product__content-main {
  @include display-flexbox();
  @include justify-content(space-between);
  @include flex-direction(column);
  width: 100%;
 
  @include media-query($small) {
    @include flex-direction(column);
    
  }
}
 
.product__description {
  @include flex-order(2);
   
 
  @include media-query($medium-up) {
    width: calc(50% - 0);
  }
 
  @include media-query($small) {
    width: 100%;
    margin-top: $gutter / 8;
    @media only screen and (max-width: 900px){
  width: 90%;
  display: block;
  margin: 0 auto;
    }
 
  }
}
 
.product__form-container {
  @include flex-order(1);
 
  @include media-query($medium-up) {
    width: calc(50% - 0);
  }
 
  @include media-query($small) {
    width: 100%;
  }
}
 
.product__form-wrapper--fixed {
  @include media-query($medium-up) {
    position: fixed;
    top: $gutter * 4;
  }
}
 
.product__form-wrapper--bottom {
  @include media-query($medium-up) {
    position: absolute;
    bottom: 0;
  }
}
 
.product-form__item {
  @include display-flexbox();
  position: relative;
  margin-bottom: $gutter / 2;
  background-color: $color-input-background;
 
  &:last-of-type {
    margin-bottom: $gutter * 2;
  }
}
 
.product-form__master-select {
  display: none;
}
 
.single-option-selector,
.product-form__quantity-input {
  opacity: 0;
  margin-bottom: 0;
  
 
  .supports-no-js & {
    opacity: 1;
  }
}
 
input[type='number'].product-form__quantity-input {
  margin-bottom: 0;
  }
 
.single-option-selector__label,
.product-form__quantity-label {
  display: inline-block;
  position: absolute;
  padding: ($gutter / 2) $gutter;
  margin-bottom: 0;
  font-weight: $font-weight-bold;
  pointer-events: none;
 
  &::after {
    content: ' - ';
    display: block;
    position: absolute;
    top: 50%;
    right: 7px;
    line-height: 1px;
    font-weight: $font-weight-bold;
  }
 
  @include media-query($small) {
    font-size: rem(16);
  }
}
 
.single-option-selector__label--hidden,
.product-form__quantity-label--hidden {
  width: 15px;
  padding: 0;
  opacity: 0;
}
 
.single-option-selector--padding {
  padding-left: 100px;
}
 
.product__share-wrapper {
  text-align: center;
  padding: $gutter 0;
}

 

Thank you so much in advance for any help!

Sandra

0 Likes
Highlighted
New Member
5 0 0

Just noticed that this is probably defined in the theme.js file? Can someone pin point me to the correct variable I'd need to adjust, so it's not scrolling?

0 Likes