Search the Community

Hello, Im quite the noob so I need your assistance. Im building a website using squarespace and im trying to modify the checkbox section of the form through css. I would like every checkbox to have a different image and the items to be in 3 columns rather than one. So far i have managed to edit the size of the checkboxes and insert the same image in all of them (see attachment) but i cannot figure out how to individually edit every single checkbox differently. Please help. Thankyou! C

Having a CSS issue I can't seem to figure out with a client website built on the Squarespace.com platform. I can't get the page to scroll down to view entire cart item image and description. Also, in certain resolutions the "add to cart" button is hidden. Here is link to page: http://www.shopalexandrino.com/shop/abstract-n-1 Please help! I'm on a paid deadline and I'm stuck! And here is the CSS code for the page: <style> select { background: none repeat scroll 0 rgba(0, 0, 0, 0) !important; padding: 20px 0 0; position: absolute; width: 151px; z-index: 2147483647; line-height: 50px; height: 50px;} .variant-option-title { position:absolute; margin-left: 4px; } .variant-option-title:after { content: "E009"; margin-left: 5px; font-family: "squarespace-ui-font"; } /* #innerWrapper #content .main-content-wrapper, #innerWrapper #content .filter { width: 65% !important;}*/ .alexandrino-additional-views { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); height: 50px; overflow: hidden !important; position: relative; width: 130px;} .alexandrino-additional-views:after { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); content: " "; font-family: "squarespace-ui-font"; ; overflow: hidden; padding: 30px; position: relative; z-index: 999999;} .product-quantity-input { display:none; } option { border: 1px solid rgba(100, 100, 100, 0.5); padding: 1px 15px; text-align: center;} @media screen and (max-width:1100px){ #innerWrapper{ position:relative !important; } } @media screen and (min-width:1100px) and (max-width:1280px){ #productSlideshow .sqs-gallery-design-stacked-slide img { /* max-height:98%; max-width:90%;*/ } } @media screen and (min-width:1280px){ #productSlideshow .sqs-gallery-design-stacked-slide img { /* max-height:74%; max-width:74%;*/ } } @media screen and (min-width:1100px){ /*1 item IMAGE*/ #productSlideshow .sqs-gallery-design-stacked-slide img { height: 83% !important; width: auto !important;}#productGallery #productSlideshow .slide { width: 83% !important;} /**/ /*.sqs-add-to-cart-button-wrapper{ position:fixed; bottom:0; }*/ /*Nex Prev Items*/ .next:before, .previous:before { font-size: 24px; height: 24px; line-height: 24px; width: 24px;}.previous:before, .next:before { font-size: 32px; height: 32px; line-height: 32px; width: 32px;}.previous:before { content: "E02c"; display: inline-block; font-family: "squarespace-ui-font"; font-style: normal; font-weight: normal; text-align: center; vertical-align: middle;}.next:before { content: "E02d"; display: inline-block; font-family: "squarespace-ui-font"; font-style: normal; font-weight: normal; text-align: center; vertical-align: middle;}.previous { left: 0;}.next { right: 0;} .previous, .next { background-color: rgba(0, 0, 0, 0.12); color: #ffffff !important; display: inline-block; font-size: 14px; line-height: 40px; margin-top: -30px; outline: medium none; padding: 10px; position: absolute; top: 45%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; z-index: 999;} /*END*/ .product-excerpt ul { ; } html { overflow-y: visible; overflow-x: hidden; } #productList { margin-left: 6% !important; width: 95%; } #innerWrapper #content { padding: 5% 0 0 0 !important;} #productSlideshow .sqs-gallery-design-stacked-slide img { float:right !important; } .sqs-preview-frame-content {height: 99% !important; } /*FIXED*/ #productDetails { float: left !important; margin-left: 20px; margin-top: 21%; position: absolute !important; right: 9%; top: 0; width: 20% !important;} #productGallery { float: none; margin: -6% auto; padding-left: 10%;} #innerWrapper { margin: 30px auto 0 !important;} #main-navigation { z-index: 2147483647 !important; } #innerWrapper { /* position: fixed !important;*/} .sqs-block .sqs-intrinsic {margin-right: -10% !important;z-index: 99999999 !important;} } @media screen and (min-width:900px) { #main-navigation { width: 20% !important;} } </style><script>var isShop = true;</script>