tuanphan

Add to Design > Custom CSS
.products.collection-content-wrapper .grid-item .grid-image-cover { object-fit: contain !important; }  

Remove above & try new code
<div class="tabs"> <ul class="tabs-nav"> <li><a href="#tab-1">Features</a></li> <li><a href="#tab-2">Details</a></li> </ul> <div class="tabs-stage"> <div id="tab-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p> </div> <div id="tab-2"> <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p> </div> </div> </div> <style> .tabs { max-width: 538px; } .tabs-nav li { float: left; width: 50%; } .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; } .tabs-nav li:last-child a { border-top-right-radius: 6px; } .tabs a { background: #eaeaed; border: 1px solid #cecfd5; color: #0087cc; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .tabs a:hover { color: #ff7b29; } .tab-active a { background: #fff; border-bottom-color: transparent; color: #2db34a; cursor: default; } .tabs-stage { border: 1px solid #cecfd5; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // Show the first tab by default $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Change tab class and display content $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); }); </script>  

Add to Design > Custom CSS
/* Buy tickets button */ button#eventbrite-widget-modal-trigger-18924204806 { font-family: proxima-nova; font-size: 16px; font-weight: 700; font-style: normal; text-transform: lowercase; letter-spacing: 1.58px; color: #121212; background-color: rgba(242,7,39,.85); border-color: rgba(242,7,39,.85); padding: 10px; border-radius: 100px; box-shadow: none !important; }  

Try adding this to Design > Custom CSS
#thumbnail { display: none; } main#main { width: calc(~"100% - 240px"); }  

Edit Site Footer >> Add a Markdown Block >> paste this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<p class="tbutton"><a href="https://google.com">Button 2 text</a></p>').insertAfter('body.homepage .desc-wrapper>p:nth-child(3)'); }); </script> <style> body.homepage .desc-wrapper p a { background-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border: 2px solid #9c9999 !important; color: #9c9999; -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; font-family: futura-pt; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 1em 1.75em; } body.homepage .desc-wrapper p a:hover { background-color: #9c9999; color: #181818; } body.homepage .desc-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.homepage .desc-wrapper p:nth-child(-n+2) { display: none; } body.homepage .desc-wrapper { padding-top: 100px; } </style>

Add to Design > Custom CSS > then save & reload your site
/* Move sidebar nav to top of page tablet */ @media screen and (max-width:900px) and (min-width:641px) { div#categoryNav { width: 100%; padding-right: 0 !important; } ul.category-nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } li.nav-section-label { flex: 1 1 100%; text-align: center; } ul.category-nav-links>li:not(:first-child) { margin-right: 2.8vw; } .collection-type-products.view-list div#content { width: 100% !important; } } /* Add category text next to plus icon */ @media screen and (max-width:640px) { .category-nav-toggle:before { content: "Category"; display: block; text-align: left; position: relative; bottom: -10px; } } Finally, if you or anyone on the server knew of a way in which I might be able to make my 'add to cart' button at the top of my product description, rather than at the bottom, that would be marvellous. Thank you ever so much!
it looks like you solved this?

Add to Design > Custom CSS
/* Mobile footer side by side */ @media screen and (max-width:767px) { div#page-section-60963f488f966c26e837b484 .span-6 { width: 50% !important; float: left !important; } }  

Try new code
/* Contact form */ .form-wrapper .field-list .field .field-element { background: transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; color: gray !important; } .form-wrapper .field-list .field .field-element:hover { background: white !important; }  

Hi. You mean this? Use this CSS
div#index-section-test-regular-page h2.index-item-title a:after { content: "squarespace best"; display: block; color: gray; font-size: 16px; }

Add to Design > Custom CSS
/* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } }  

Hi. Add to Design > Custom CSS
/* remove menu underline */ div.header-menu-nav-item a { text-decoration: none !important; border: none !important; background-image: none !important; }  

ON tablet, Testimonials text doesnt look good.
You can reduce text size or increase text width
/* Fix tablet footer */ @media screen and (max-width:991px) and (min-width:768px) { div#block-cf3f3e2816923e9f9ffa { padding-left: 0; padding-right: 5px; } }

Add to Design > Custom CSS
/* List page - hide sold out */ body.view-list .product-mark.sold-out { display: none; }  

Hi. Add to Design > Custom CSS. REplace with your icon url
/* Login text to icon */ .user-accounts-text-link { color: transparent !important; background-image: url(https://cdn.pixabay.com/photo/2021/03/10/10/51/cherry-blossom-6084249__340.jpg); background-size: contain; background-repeat: no-repeat; }  

Add to Design > Custom CSS
/* image to bottom */ @media screen and (min-width:768px) { [data-section-id="60280e1ac467c7682a023318"] .content-wrapper { padding-bottom: 0 !important; } div#page-section-60280e1ac467c7682a023318>.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } div#block-yui_3_17_2_1_1614258722517_6384 { padding-bottom: 0; } }

Add to Design > Custom CSS
/* Home transparent */ body.homepage .header-announcement-bar-wrapper, body.homepage header#header { background: transparent !important; }  

Use this new code
body.homepage a.sqs-block-button-element { background: transparent !important; border: 1px solid white; width: 350px; }  

Add to Design > Custom CSS > Then save & reload your site
/* resize mobile slideshow */ @media screen and (max-width:767px) { body.homepage .gallery-fullscreen-slideshow { height: 30vh !important; } }  

Add to Design > Custom CSS
.header-title-nav-wrapper { flex: 1 0 80% !important; }  

Usethiss code
footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }  

try this code
@media screen and (max-width:767px) { .header--menu-open .header-title-logo a { background-image: url('https://static1.squarespace.com/static/5fc6fe0f791da6493f67c762/t/6020a88d5714ae7f74a1debe/1612753037570/logo+-+reverse.png'); background-size: cover; background-repeat: no-repeat; } .header--menu-open .header-title-logo img { visibility: hidden; } }  

Add to Design > Custom CSS
[data-section-id="6011fb1b6067742fe1ece0a2"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; }  

Add to Design > Custom CSS
/* fullsize product image */ @media screen and (max-width:767px) { img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } }  

Add to Design > Custom CSS
/* align shop title */ @media screen and (max-width:767px) { h2.nested-category-title { text-align: center !important; } }  

Add to Design > Custom CSS
div.image-slide-title { white-space: initial !important; }