AkankshaK

Thank you Paul, the change worked great. I really appreciate all your help. Thanks again :) 

$(window).load(function(){ becomes
$(window).on("load", function() {  

It's best to load jQuery in the footer, unless the script that relies on it must be in the header.
Some methods and properties from older versions have been removed in favour or newer (usually better) alternatives. For example, .size() was removed in favour of the .length property.
You'd need to share the specific code so that we can understand the issue.
Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you Paul. That really helps. 
Can I further ask - the best place to add the jquery within the code injection area - is it the header or the footer?
I did as you suggested - took a back up and replaced the various versions of the jquery with the latest one. All plugins/code snippets are working except for one which will only work with: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Would you know why that might be? 
Thank you once again. 

This is a jQuery library. You have provided links to version 1, version 2.2.0 and version 3.51.
In summary, you should only ever load one version of jQuery on your site and it should always be the latest version of the library. The versions above have known security vulnerabilities and are not safe to use.
Today, the latest version is 3.6.1 and the correct link is as follows:
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
You should be able to remove all the other versions and replace them with the version that I've provided above. It should appear once only and should be added to your code injection area before other "<script>" tags. Remember: it's a good idea to take a backup of the existing code before making changes, just in case you have difficulties later!
You should try to avoid using jQuery altogether if you can, by using code snippets and "plugins" that don't require it. jQuery is relatively easy to learn as it greatly simplifies JavaScript programming, but whilst it makes learning to code easier, it is often completely unnecessary and should be avoided on a live site. Many snippets only require jQuery because they have been written by people who are learning to code (as opposed to professional developers) and they have yet to learn how to code in pure JavaScript (that doesn't require jQuery).
I hope this helps.
Did this help? Please give feedback by clicking an icon below  ⬇️

Add to Design > Custom CSS
.header-nav-list { flex-wrap: nowrap !important; }  

You can move up cookie notice on mobile only with this CSS
/* Cookie notice mobile */ @media screen and (max-width:767px) { .sqs-cookie-banner-v2 { position: fixed !important; bottom: 100px !important; } }  

Yesssss Please 🙂

Site URL: https://www.purnamayurveda.com
Hi, 
I used the following code from ghostplugins to move the mobile information bar behind the mobile menu overlay. 
// Push Mobile Info Bar Behind Mobile Menu // .sqs-mobile-info-bar { z-index: 4 !important; } This works fine except on the header appears over the the business hours screen overlay. My header is transparent so it looks awkward.  See screenshot. 
Any recommendations? I would like the mobile info bar to be behind the mobile menu but I dont want the header to appear on the business hours overlay screen. 
Thanks
Akanksha 

Yayy thank you, that worked brilliantly.  Thanks so much, you are a real star 😄

Add to Design > Custom CSS
/* site title */ .header-nav:before { content: "Fredericksburg Christian Health Center"; display: block; text-align: center; font-size: 30px; position: relative; top: -20px; }  

Try adding this to Settings > Advanced > Code Injection > Header:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> And add this to Design > Custom CSS:
.header-nav-item.header-nav-item--folder a.header-nav-folder-title:after {   font-family: FontAwesome;   content: "\f107";   padding-left: 4px; } You should see this:

 
Let me know how you get on.
-Paul

Hi all, 
 
I have used the updated code by schwartz-edmisten but would like the code to target specific images only and not background images as a whole. Does anyone know how to do this please?

Thanks in advance

Just found this code from Thompsonweb.design
//Collage Blocks Mobile @media (max-width:480px){ .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{ width:100%; margin-top:calc(0%)!important; position:relative} .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{ left:5% } }

Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { .homepage figure.design-layout-collage img { visibility: hidden; } }  

Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
 
Checked & Wrote by tuanphan