Beyondspace

LOl it's like 2 of you are the same person, 7.1 version really good that way and RCL87, have you try the opacity option yet? I feel like many designer has the same needs like you 2 so please mark best answer so other people can know the solution

Settings->Help , thanks

Add opacity to this, like opacity: 0.5;

Hi sruss76, RCL87 What are you guys site template name?

Have you try it?

the template you used can't add search icon on navigation right?

You will need fixed id of these section and your page id, use Find Squarespace Ids Chrome extension to get these 4 ids, visual instruction on my blg 1. page id - Collection id 2. footer section id, I help you collected These are in vertical order section of footer - "how to launch your dream business in uncertain times?" section[data-section-id="5fa45f47e86b2736c8aa4259"] section of footer - instagram feed (currently white /blank) section[data-section-id="5f84b82f70010d188ea9a582"] section of footer - classic footer w/ navy blue background, copywright info etc. section[data-section-id="5f75392bb159184a34e4e225"] To hide any of them on any page you can use this formula [collection-id] [footer-section-id] { display: none ! important; } Real world example, your initial request #collection-5f517693044378025220a034 section[data-section-id="5fa45f47e86b2736c8aa4259"] { display: none !important; }

Password not correct

Please share current url

Please share your current site

Could you add the current search box of your template and we can see if it can be change to glass? What is your template using?

I just update the z-index, please check and let me know

This css #footer a { color: #e0241a !important; border: none !important; }

Can you try this, Settings->Design->Custom Css @media only screen and (max-width: 1024px) and (pointer: coarse), screen and (max-width: 799px) { .header--menu-open .header-display-desktop { display: none; } .header-display-desktop { display: block; position: absolute; width: auto; left: 50%; transform: translateX(-50%); z-index: 999999; } .header-display-desktop .header-title-nav-wrapper { display: none; } .header-display-desktop .header-nav, .header-display-desktop .header-burger { display: none } .header-display-desktop .header-actions.header-actions--right { display: block; } .header-display-desktop .header-actions-action--cta { display: block; } }

This is also an interesting topic for me too! I actually made a plugin for my client site as Charlie Edmiston Paintings — 2020 — Charlie Edmiston Studio So for specific section I can suggest you do following to apply as hotfix, if you need a universal method let's pm me 1. Remove background of section, instead create a span-6 solumn and add the image block on the right of your text 2. Remove the margin and padding of section, make it 100% width 3. Use Css sticky to apply effect Output: http://beyondspace.tk/wp-content/uploads/2020/11/sticky.gif section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper { padding: 0; margin: 0; max-width: unset; } section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content { width: 100% !important; } /* Assume you got span-6 image column added*/ section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child { position: -webkit-sticky; position: sticky; top: calc(6vw + 29px); } /* I want to make sure image is shorter than content */ section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure > div { padding-bottom: 50% !important; } section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure img { height: auto !important; top: 50% !important; transform: translateY(-50%) !important; }

I may use the same color code of your current site Design->Custom Css .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title { color: #2c67af; } .sqs-async-form-content .form-wrapper input[type=submit] { background-color: #2c67af; }

@media only screen and (max-width: 500px) { #block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content h3 { font-size: 7vw } #block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content p { font-size: 4vw } }

You may need js to help with, modify it at your will and place it in Advanced->Custom code injection <script> var addedText = '<p class="" style="white-space:pre-wrap;"><em>For more on this bag head to @blaiserubyloves instagram for more in depth videos and pictures of this bag and others, where you will see more on condition, imagery of the bag and styling tips.&nbsp;</em></p>'; document.addEventListener('DOMContentLoaded', function() { if ( document.querySelector(".ProductItem-details-excerpt") ) { document.querySelector(".ProductItem-details-excerpt").insertAdjacentHTML("beforeend", addedText); } }); </script>

I tried to make their ratio as 75%, you can feel free to try, Copy to Design->Custom Css Your site is great, which template you used? @media only screen and (max-width: 600px) { #item-5f9b1c8421bce951fa5c24e4 .sqs-block-image-figure .v6-visually-hidden + div { padding-bottom: 75% !important; } #item-5f9b1c8421bce951fa5c24e4 .sqs-block-image-figure .thumb-image { top: 50% !important; height: auto !important; transform: translateY(-50%) } }

Css may not help sort the alphabet

#mobileNav.menu-open { height: 100vh !important; } #mobileNav .wrapper { position: relative; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .site-title #mobileMenuLink a { color: transparent; width: 100%; height: 15px; user-select: none } #mobileMenuLink { position: fixed; text-align: right; right: 20px; top: 60px; background-color: transparent; z-index: 9999; } #mobileMenuLink:before, #mobileMenuLink:after { content: ''; position:absolute; width: 40px; height: 1px; background:#000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition:0.5s; left: 0; } #mobileNav.menu-open + #mobileMenuLink { background:rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0, 0, 0, 0); } #mobileNav.menu-open + #mobileMenuLink:before { top: 0; transform:rotate(45deg); } #mobileNav.menu-open + #mobileMenuLink:after { top: 0; transform:rotate(135deg); box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); } Copy this to Settings->Design->Custom Css

<script> document.addEventListener('DOMContentLoaded', function() { document.addEventListener("click", function(e) { var element = e.target; if (element.classList.contains('lightbox-inner')) { element.querySelector(".lightbox-close").click(); } }); }); </script> Place this snippet in custom code injection, detail here

Feel free to try my solution if it fit, Copy to Settings->Design->Custom css, .products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out { order: 2 } .products.collection-content-wrapper .products-flex-container .list-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media only screen and (max-width: 768px) { .products.collection-content-wrapper .products-flex-container .list-grid { grid-template-columns: 1fr; } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 100%; } } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 80%; }

You want image to be equal height on this view right? since image ratio is different, make them same height may reduce width of some,