tuanphan

Use this CSS code /* Masonry to grid mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } figure.gallery-masonry-item img { width: 100% !important; } }

Try adding to Page Header <style> @media screen and (max-width:767px) { .summary-carousel-pager .previous { top: unset !important; bottom: 0 !important; left: calc(50% - 60px) !important; } .summary-carousel-pager .next { top: unset !important; bottom: 0 !important; right: calc(50% - 60px) !important; } } </style> astroland https://gemini-alcott.squarespace.com/learn

Add to Design > Custom CSS body.homepage .accordion-item__description { max-width: 100% !important; text-align: center !important; } body.homepage .accordion-icon-container { position: relative; left: -50px; }

Add this CSS code button.lightbox-handle { font-size: 10px !important; }

The site use ETModules font, I can't find font library. You can consider using FontAwesome Live chat icon: https://fontawesome.com/search?q=message&o=r Email icon: https://fontawesome.com/search?q=envelope&o=r Lamp icon: https://fontawesome.com/search?q=idea&o=r Contact info icon: https://fontawesome.com/search?q=map maker&o=r If you agree, we will give quick guide to add FA icon

Change nav items color or change header color?

Hi, What is password?

spongebob https://lemon-okra-ryjp.squarespace.com/ I see it worked here If you need to change to 2 items, use this code @media screen and (max-width: 767px ) { .portfolio-grid-basic { grid-template-columns:repeat(2,minmax(0,1fr)) } } If you need code on both Desktop + Mobile, use this code .portfolio-grid-basic { grid-template-columns:repeat(2,minmax(0,1fr)); }

You try enable this option

Try adding this code to Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { const productGrid = document.querySelector('div#gridThumbs'); if (productGrid) { var productItems = productGrid.querySelectorAll('.grid-item'); for (var i = productItems.length; i >= 0; i--) { productGrid.appendChild(productItems[Math.random() * i | 0]); } } }); </script>

The site is private. Can you setup an access password? We can check easier

Maybe problem from custom font, you try contacting font author Or you can consider change this text only to another font (we can give the code) for eg, I changed to monospace

Try adding to Design > Custom CSS .fe-block.fe-block-yui_3_17_2_1_1687411151619_20479 .sqs-block-shape svg.sqs-shape { fill: transparent; stroke: transparent; border: 1px solid white; border-radius: 50%; }

Can you share link to this page? We can check easier

Add this code to Design > Custom CSS .ProductItem-additional .image-block { pointer-events: none; }

Which portfolio layout you will use? Grid simple, Follow background..or?

Add this code to Design > Custom CSS /* enlarge logo header */ .header-title-logo img { transform: scale(1.7); }

Try adding to Design > Custom CSS /* Mobile Slideshow */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="63add699bdbcde4051a98b7c"] ul { min-height: unset !important; } }

Add a Code Block > paste this code <button id = "button"><i class = "fa fa-play" aria-hidden = "true"></i></button> <div id = "lightbox"> <i id = "close-btn" class="fa fa-times"></i> <div id = "video-wrapper"> <iframe id = "video" width="960" height="540" src = "https://www.youtube.com/embed/lJfqK9bgIng" frameborder = "0" allowfullscreen></iframe> </div> </div> <style> #button { /* Text */ font-size: 45px; /* Dimensions */ width: 100px; height: 100px; /* Positioning */ position: fixed; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* The code above makes sure the video is both vertically and horizontally centered to the screen */ /* Styling */ background-color: rgba(0, 0, 0, 0.95); border: 0; /* remove annoying grey border */ border-radius: 50%; /* make it a circle */ outline: none; /* Ditch the annoyning blue outline on click */ cursor: pointer; box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25); /* ----- Transformations ----- */ -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); /* ----- Transitions ----- */ -webkit-transition: transform .5s ease; -moz-transition: transform .5s ease; -ms-transition: transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; } #button:hover { /* ----- Transformations ----- */ -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); /* ----- Transitions ----- */ -webkit-transition: transform .5s ease; -moz-transition: transform .5s ease; -ms-transition: transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; } #button > i { /* Text */ color: grey; text-shadow: 1px 1px rgba(255, 255, 255, 0.2); /* Make play sign 3d-ish */ /* Positioning */ position: relative; margin-top: 4px; margin-left: 6px; /* ----- Transitions ----- */ -webkit-transition: color .5s ease; -moz-transition: color .5s ease; -ms-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; } #button:hover > i { /* Text */ color: white; /* ----- Transitions ----- */ -webkit-transition: color .5s ease; -moz-transition: color .5s ease; -ms-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; /* When we hover on the button make the play sign white. */ } #lightbox { /* ----- Positioning ----- */ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; /* The code above makes sure that the lightbox covers the entire page*/ /* ----- Visibility ----- */ display: none; /* ----- Styling ----- */ background-color: rgba(0, 0, 0, 0.95); /* Normally, most lightboxes do not use a completely solid black, but with about 90-95% opacity so that the background is somewhat visible */ } #video-wrapper { /* ----- Positioning ----- */ position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* The code above makes sure the video is both vertically and horizontally centered to the screen */ /* ----- Styling ----- */ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); /* The code above is used to add a little shadow to the video making blend in better */ } #close-btn { /* ----- Text ----- */ color: grey; font-size: 25px; /* ----- Positioning ----- */ position: fixed; top: 3%; right: 3%; z-index: 2; /* The code above is used to put the button on the upper right corner of the lightbox */ /* ----- Transformations ----- */ -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); /* The code above is used to initialize the scale for the button so that it can be used in transitions */ /* ----- Transitions ----- */ -webkit-transition: transform .5s ease, color .5s ease; -moz-transition: transform .5s ease, color .5s ease; -ms-transition: transform .5s ease, color .5s ease; -o-transition: transform .5s ease, color .5s ease; transition: transform .5s ease, color .5s ease; } #close-btn:hover { /* ----- Text ----- */ color: white; /* ----- Styling ----- */ cursor: pointer; /* ----- Transformations ----- */ -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); /* ----- Transitions ----- */ -webkit-transition: transform .5s ease, color .5s ease; -moz-transition: transform .5s ease, color .5s ease; -ms-transition: transform .5s ease, color .5s ease; -o-transition: transform .5s ease, color .5s ease; transition: transform .5s ease, color .5s ease; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function() { // When the button is clicked make the lightbox fade in in the span of 1 second, hide itself and start the video $("#button").on("click", function() { $("#lightbox").fadeIn(1000); $(this).hide(); var videoURL = $('#video').prop('src'); videoURL += "?autoplay=1"; $('#video').prop('src',videoURL); }); // When the close button is clicked make the lightbox fade out in the span of 0.5 seconds and show the play button $("#close-btn").on("click", function() { $("#lightbox").fadeOut(500); $("#button").show(250); }); }); </script>

Yes. But it will require a plugin. Let me write a quick guide for you.

Which code you want to use?

Incorrect password

It shows this to me on mobile (Samsung/Chrome). I think both look same? and on Desktop

Add to Design > Custom CSS /* product info order */ .ProductItem-details .ProductItem-details-checkout { display: flex !important; } .product-quantity-input { order: 1 !important; } .sqs-add-to-cart-button-wrapper { order: 2 !important; } .ProductItem-product-price { order: 3 !important; } .ProductItem-details-excerpt { order: 4 !important; }

You mean Black Text bar on top of site? It is in Marketing > Announcement Bar