tuanphan

@kourtnieriv Don't remove above code #1. To reduce space, add this CSS /* Mobile - about images */ @media screen and (max-width:767px) { /* left image */ div#block-yui_3_17_2_1_1638284585867_2289 { padding-right: 5px !important; } /* right image */ div#block-yui_3_17_2_1_1638284585867_3326 { padding-left: 5px !important; } } #2. For 3 images at bottom of page, use this CSS /* Mobile - about 3 images */ @media screen and (max-width:767px) { div#page-section-61a641c039c80d10d891a139 { &>.row>.span-4 { width: 33.3333% !important; float: left !important; } &>.row>.span-8 { width: 66.6667% !important; float: left !important; } &>.row>.span-8>.row>.span-4 { width: 50% !important; float: left !important; } } }

Try adding this code to Code Block <nav class="circular-menu"> <div class="circle"> <a href="" class="fa fa-home fa-2x"></a> <a href="" class="fa fa-facebook fa-2x"></a> <a href="" class="fa fa-twitter fa-2x"></a> <a href="" class="fa fa-linkedin fa-2x"></a> <a href="" class="fa fa-github fa-2x"></a> <a href="" class="fa fa-rss fa-2x"></a> <a href="" class="fa fa-pinterest fa-2x"></a> <a href="" class="fa fa-asterisk fa-2x"></a> </div> <a href="" class="menu-button fa fa-bars fa-2x"></a> </nav> <style> .circular-menu { width: 250px; height: 250px; margin: 0 auto; position: relative; } .circle { width: 250px; height: 250px; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: white; display: block; height: 40px; width: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; position: absolute; text-align: center; } .circle a:hover { color: #eef; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } </style> <script> // Demo by http://creative-punch.net var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } </script>

The above code for desktop only, with mobile you can add this code @media screen and (max-width:640px) { .qgiv-embed-container iframe { min-height: 900px !important; } } Adjust number 900

Hi. Your site is private. Can you setup password & share url again?

Try adding to Design > Custom CSS html, body {overflow-x:hidden;}

Do you still need help with Retreats page?

You're welcome. If you have any other problems, just reply to this post/or post new topic

Have you tried set up Breath page as homepage yet? If this doenn't work, which plan do you use? If business plan, add this code into Breath Page Header <script> window.location.href = "/"; </script>

Not sure. Have you tried dns main domain (abc.xyz) to Squarespace & dns sub-domain (sub.abc.xyz) to Hosting, then you can host a folder on hosting yet?

Try adding to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="607e7dea4ff0a43308d8722f"] { min-height: unset !important; height: 40vh; } }

Hi, #1. I don't think you can get all into dropdown menu, especially By Price Range, with other, you can use Categories/Tags + a Mega Menu plugin. #2. With search icon Wich position you want to add it? Beside cart icon or login text? #3. Try WeGlot or this free guide to add 2/3 languages. https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

@rafaelRA If you still haven't solved this, try these code by @creedon

Use this new code /* Homepage Mobile Carousel */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] { ul { grid-template-columns: repeat(3,1fr) !important; } h2 { font-size: 17px !important; } a.list-item-content__button { font-size: 8px !important; }} }

Add to Design > Custom CSS /* resize mobile top image */ @media screen and (max-width:640px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } }

Try adding this to Design > Custom CSS img.ProductItem-gallery-slides-item-image { object-fit: contain !important; }

You mean add one on this position?

Add this code to Design > Custom CSS to fix problem div#sidecarNav { z-index: 9999 !important; }

Not related, but have you tried this free guide to add 2 languages, it will be easier. https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Don't remove your code. Add this to Design > custom CSS > Then save & reload the site @media screen and (max-width:767px) { body.homepage .gallery-slideshow { height: 35vh !important; } }

Hi, You need to remove both banner on hover?

Hi, Design > Site Styles >> Adjust their line-height

You mean Change logo when overlay menu is open (on each page) (screenshot). Is this right? Keep original logo when overlay menu is close.

In your code, edit this line padding: 0px; to this padding: 0px !important;

Add to Design > Custom CSS [data-section-id="61968be61b95d0428debe6c8"] .section-background { background-image: url(https://static1.squarespace.com/static/61968ba483d7c14541409262/t/619fa1922c62ce4f831718e1/1637851538072/Pattern+01.png) !important; }

Try this new code The code will run on desktop only @media screen and (min-width:901px) { header#header { position: fixed; top: 0; z-index: 999; left: 0; right: 0; padding-top: 60px; padding-left: 60px; padding-right: 60px; background-color: white; } div#pageWrapper { margin-top: 150px; } }