Cyperpunk-girl-333 Posted May 12, 2021 Share Posted May 12, 2021 Site URL: https://www.huntandgathergrocer.com.au/ .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned { padding-top:30px AUTO; } .summary-content { position:TOP; } .summary-title .summary-title-link:after { content: ' add to cart'; background-color: #FDEEF4; border-radius: 1px; display: block; padding: 10px 10px; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: normal; text-transform: uppercase; letter-spacing: 1px; color: #000; background-color: normal; border-color: normal; position: AUTO; bottom: -10 } how do i make this button shorter and not take up the length of the screen / page? Also how would i center it under the price of the product ? instead of between the heading and the price please see url also if any one could help me understand as to why my page is loading off center on mobile phone that would be amazing? I am stumped as to why i've changed my boarder so many times and my mobile break point and this isn't working Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 Hi. Use this code .summary-title .summary-title-link:before { content: ' add to cart'; background-color: #fdeef4; border-radius: 2px; display: block; padding: 10px 20px; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #000; width: 100px; margin: 20px auto; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted May 16, 2021 Author Share Posted May 16, 2021 On 5/14/2021 at 6:39 PM, tuanphan said: Hi. Use this code .summary-title .summary-title-link:before { content: ' add to cart'; background-color: #fdeef4; border-radius: 2px; display: block; padding: 10px 20px; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #000; width: 100px; margin: 20px auto; } Thank you, however now on my product categories shop Mesh market bags (example ) The buttons are long? Is it possible to make them the same sitewide As you did with code above on summary on home page. Link to comment
Cyperpunk-girl-333 Posted May 16, 2021 Author Share Posted May 16, 2021 On 5/14/2021 at 6:39 PM, tuanphan said: Hi. Use this code .summary-title .summary-title-link:before { content: ' add to cart'; background-color: #fdeef4; border-radius: 2px; display: block; padding: 10px 20px; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #000; width: 100px; margin: 20px auto; } <style> .ProductList-grid .ProductList-item { padding-bottom: 50px; } .ProductList-grid .ProductList-item .sqs-add-to-cart-button { position: absolute; z-index: 1000; bottom: 0; left: 0; right: 0; width: auto; margin: 20 auto; padding-right: 5px; padding-left: 5px; } .ProductList-grid .ProductList-item .ProductList-overlay { margin-bottom: 70px; } </style> <script> $(".ProductList-grid .ProductList-item").each(function(e){ $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>'); }); $(function() { $(".ProductList-grid .ProductList-item").each(function(e){ var dataItemId = $(this).attr('data-item-id'); $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId); }); }); </script> tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment