Product Detail page adjustments

Site URL: https://www.ciao-italia.ch/

Hello,

In the product detail page I would like to move the put the Quantity and Add to cart button above  the Price, I also would like to move the smaller product description (in the yellow box) above that, so above the Quantity and Add to Cart, also the spaces between the lines I wold like to reduce in that.

Then I would like to line up everything with the top of the picture (so The Title should line up with that.

I used already a CSS code but I can't figure out how I can move these as I want.

Attached a picture of how I want it (maybe not too clear 🙂 ) the CSS codes I already used I will paste below this message

Can someone help me?

Website: www.cia-italia.ch

The password for the site is: cully

CSS Code Used already (I pasted all the codes I used in the site):

/* Style examples for Product Titles */
/* Product Title: smaller second line on product detail page */
.ProductItem .ProductItem-details h1.ProductItem-details-title, .products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size: 19px;
  line-height: 1em;
}

/* Product Title: larger first line on product detail page */
.ProductItem .ProductItem-details h2.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(0.50vw + 1rem);
  font-weight: bold
}

nav.ProductItem-nav * {
    font-size: 25px;
}
@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

#myBtn {
   width: 50px;
   height: 50px;
   display: none;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   border: none;
   outline: none;
   font-size: 25px !important;
   color: white;
   cursor: pointer;
   padding: 10px 10px 10px 11px;
   border-radius: 50%;
   box-shadow: 1px 1px 5px #000;
   /* Change the hex code in the next line to change background color */
   background-color: #a4a4a4;
}
#myBtn:hover {
   background-color: #aeaeae;
}

.sqs-add-to-cart-button {
    width: 50% !important;
}

/* Variant */
.variant-select-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Quantity */
.product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.header#header {position: fixed!important;}

.header-nav-folder-content {
   background: transparent!important;
}
/* Change dropdown menu background */
.header-nav-folder-content {
   background: #dad9d9 !important;
}

.sqs-block-image .design-layout-poster .image-title-wrapper {
    padding-bottom: 15px;
}
.sqs-money-native:before {
   content:' '!important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 0.1em;
padding-bottom: 0.1em;
}

@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
  
}
}
/* Product Block Prices */
@media screen and (max-width:767px) {

.product-block .productDetails .product-price {
  font-size: 30em;
}
 }
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;

}
.sqs-add-to-cart-button-wrapper {
margin-bottom: -1 !important;
position: relative;
bottom: 111px;
  left: 150px
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 1em;
    padding-right: 1em 
}
@media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {
  
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
.products.collection-content-wrapper {
  padding-top: 0;
}
section.ProductItem-details .ProductItem-details-checkout { 
display: flex; 
flex-flow: column; 
} 

.ProductItem-details .ProductItem-details-excerpt { 
order: 1 !important; 
} 

.ProductItem-details .product-variants { 
order: 1 !important; 
} 

.ProductItem .ProductItem-details .product-quantity-input { 
order: 2 !important; 
} 

.ProductItem-details .ProductItem-product-price { 
order:  !important; 
} 

.ProductItem-details .sqs-add-to-cart-button-wrapper { 
order:  !important; 
} 
.ProductItem-details .sqs-add-to-cart-button-wrapper { 
order: !important; 
} 

.ProductItem .ProductItem-additional { 
order:  !important; 
}

  .ProductItem-details .ProductItem-details-excerpt {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  .ProductItem-details .ProductItem-additional {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }

Thanks, Tony

Hi,

What is access password?

42 minutes ago, tuanphan said:

Hi,

What is access password?

cully

On 10/15/2021 at 10:24 AM, tuanphan said:

Hi,

What is access password?

Hi Tuanphan, did you manage to get access with the password? It's cully