justaguywhodoesthings

Hi there! Thank you for the proposed solution. After playing around with it, it seems that the issue actually exsits in the code injection of the footer. I don't see anything that could cause this: <script src="https://ninjakit-assets.ixstudio.net/assets/admin/js/ninja-sqs.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('.blog-more-link:contains("Read More")').text('View Details'); $('.summary-read-more-link:contains("Read More")').text('View Details'); </script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Summary Block Autoplay --> <script> window.onload = function() { var nextArrow = document.querySelector("#block-yui_3_17_2_1_1612983330424_9026 .summary-carousel-pager-next, #block-yui_3_17_2_1_1642809492834_2980 .summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 5000); }; </script>

@bangank36 so it seems the issue has something to do with our testimonial code but it is above me and I cannot figure out what line of code is causing it. Sorry if the code is bloated or not simplified. // Testimonial Slider section[data-section-id="61eb4821a110523ca58c2c99"] { .summary-thumbnail { border: none; } .summary-item-list { pointer-events: none; .summary-item { padding-left: 20px !important; padding-right: 20px !important; @media screen and (min-width: 640px) { padding-left: 100px !important; padding-right: 100px !important; } } } .summary-item-list img { border-radius: 100% !important; height: 150px !important; width: 150px !important; } .summary-thumbnail-outer-container { height: 150px !important; width: 150px !important; margin: 0 auto; } .summary-item-list img { border-radius: 100% !important; height: 150px !important; width: 150px !important; } .summary-title { margin-top: 30px !important; font-size: 1rem !important; font-weight: 600; letter-spacing: 1px; font-family: proxima-nova; text-transform: uppercase; text-align: center !important; pointer-events: none; } @media screen and (max-width: 640px) { .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { width: 80%; } } } #block-yui_3_17_2_1_1637251576741_11475 { margin-top: -25px !important; } // Testimonial Slider section[data-section-id="60242a8e0cdd2c0684a19875"] { .summary-thumbnail { border: none; } .summary-item-list { pointer-events: none; .summary-item { padding-left: 20px !important; padding-right: 20px !important; @media screen and (min-width: 640px) { padding-left: 100px !important; padding-right: 100px !important; } } } .summary-item-list img { border-radius: 100% !important; height: 150px !important; width: 150px !important; } .summary-thumbnail-outer-container { height: 150px !important; width: 150px !important; margin: 0 auto; } .summary-item-list img { border-radius: 100% !important; height: 150px !important; width: 150px !important; } .summary-title { color: #fff !important; margin-top: 30px !important; font-size: 1rem !important; font-weight: 600; letter-spacing: 1px; font-family: proxima-nova; text-transform: uppercase; text-align: center !important; pointer-events: none; } @media screen and (max-width: 640px) { .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { width: 80%!impoprtant; } } } Best, Tyler

Do I apply this at the top of my custom CSS? Also, this issue is persistent on mobile and tablet as well. Thank you for replying so swiftly!

Site URL: https://unchartedtrvl.com Hi there! Just want to say that Squarespace's support has been out of this world with my first experience thus far using it. I've hit a bit of a wall trying to figure out why my site, on mobile, still acts like it's on a desktop. When loaded on mobile, it seems fine at first glance. However, the breakpoint seems "broken" as the horizontal scroll reveals way more than needed and zooming out shows a nearly desktop version of the site. Any help? https://unchartedtrvl.com Thanks!

It opens perfectly, but the close button does not work for us. I've tested on 3 PCs and 2 Mobile. Is there a reason this is happening?

I appreciate you! Unfortunately, it is not working for me. This is the entire code: /* Nav design */ .header-title-nav-wrapper { flex: 1 0 75%!important; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; } [href="/destinations"]+.header-nav-folder-content { columns: 3 !important; width: auto !important; display: absolute !important; width: auto !important; } .header-nav-folder-content{ background-color:rgba(255,255,255,0.98)!important} .header-nav-folder-content a { padding-bottom:0.1em!important; padding-top:0.3em!important} .header-nav-folder-content{ border: 1px solid #1b6fc1} .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 20px!important; .header-nav-folder-item { font-weight: bold!important; padding: 0em 1em!important; } .header-nav-folder-item { font-size: 19px; } .header-nav-folder-item:hover { background: #1470af!important; a {color: #fff!important;} } a.header-nav-folder-title[href="/destinations"] + div.header-nav-folder-content .header-nav-folder-item--external { font-size: 20px !important; font-weight: normal !important; padding: 0em 1.5em !important; } }

I apologize, I'm having issues with website owner's communications. Try "UTS2022"

I apologize, try "UTS2022"

Site URL: https://unchartedtrvl.squarespace.com/config/ On our site, within a page, we have a lightbox form with a button that says "Request Detailed Itinerary By Mail or Email." Submission, opening, and fields work fine but there is no way to close the lightbox form. It essentially breaks the page and requires a refresh. Can anyone help out here, I am at a complete loss. https://unchartedtrvl.squarespace.com/scheduled-group-tours-2022/north-caucasus

Hi there, site: https://unchartedtrvl.squarespace.com/ pass: unchartedtravel

We're definitely considering this. Is it possible for you to help me on this within this thread?: Right now I have this code, which puts all the links with a padding and sets to normal width: .header-nav-folder-item.header-nav-folder-item--external { font-size: 20px!important; font-weight: normal!important; padding: 0em 1.5em!important; } This is a preview of the "Destinations" drop down menu: This is exactly what I'm looking to do. However, I'd like to just style the links like this only within "Destinations" and not within "Resources" or any other folder that has links.

This seems to only split the columns up evenly. What if we want the column to start on an earlier/later link?

Hi Tuanphan! Sure thing. https://unchartedtrvl.squarespace.com/ pw: undiscovered

Any help?

Site URL: https://unchartedtrvl.squarespace.com In the screenshot below, I have created 4 columns using the CSS for the drop down when "Destinations" is hovered on. It's filled with Regions and Countries. The regions are in bold and the countries within that region fall under them in regular text. What I'd like to do is set up each column to begin with the bold Region but I am lost on how to do that. Ideally, Central Asia & Far East, Europe and South Caucasus, Middle East, and Russia would all be at the top of each column with its countries following below. Right now, my code to style the header is below, It can probably be optimized too... but right now I'd just like to set up my nav menu how I want it. /* Nav design */ .header-title-nav-wrapper { flex: 1 0 75%!important; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; } [href="/destinations"]+.header-nav-folder-content { position: fixed!important; position: center!important; max-width: 75vw!important; margin-left: 6vw!important; margin-right: 6vw!important; column-count: 4!important; } .header-nav-folder-content{background-color:rgba(255,255,255,0.92)!important} .header-nav-folder-content a {padding-bottom:0.2em!important;padding-top:0.5em!important} .header-nav-folder-content{ border: 1px solid #1b6fc1} #block-yui_3_17_2_1_1612978871795_2959 h1{color:#fff} .sqs-block-image .design-layout-collage .image-overlay{ opacity:0 } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 20px!important; .header-nav-folder-item { a[href="/central-asia-far-east"] {font-weight: bold!important} a[href="/europe-south-caucasus"] {font-weight: bold!important} a[href="/middle-east"] {font-weight: bold!important} a[href="/russia"] {font-weight: bold!important} a[href="/scheduled-group-tours-2022"] {font-weight: bold!important} a[href="/scheduled-group-tours-2023"] {font-weight: bold!important} a[href="/tailor-made-tours"] {font-weight: bold!important} padding: 0em 1em!important; } .header-nav-folder-item { font-size: 20px; } .header-nav-folder-item:hover { background: #1470af!important; a {color: #fff!important;} } }

I am currently trying to re-order my blog posts by changing the publication date of each post. However, they are not re-ordering at all. I started the publication order on 10/01 for the first post, then 10/02 for the second post, and so on.