tony99982 Posted October 14, 2021 Share Posted October 14, 2021 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 Link to comment
tuanphan Posted October 15, 2021 Share Posted October 15, 2021 Hi, What is access password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tony99982 Posted October 15, 2021 Author Share Posted October 15, 2021 42 minutes ago, tuanphan said: Hi, What is access password? cully Link to comment
tony99982 Posted October 16, 2021 Author Share Posted October 16, 2021 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 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.