Beyondspace

Just PM you the detail

Hi Pandagal Your site is not accessible

Put the code I sent into this snippet @media screen and (min-width: 600px) { /*Copy them here*/ }

HI could you provide your site url to check?

I did some custom code for my client on this site, is it what you want? This feature is a custom plugin for squarespace http://recordit.co/p9VOuCKBkq

Hi Muffet24, Afraid there is no such option except image order, do you want to change the template files?

Hi, what is your site url, I can have a look

Can be, please paste this into Settings->Custom Css .header-layout-branding-center-nav-center .header-title-nav-wrapper { width: 100%; display: block; flex: 100%; }

Did you added the custom css I provided? Also the first 3 images is not the same size with the ones below, should be 500x500 dimension

Since you can grab the uploaded image url, I can suggest you use psuedo :after selector for this, using the unique url in the link tag a[href="/alley-house-1"]:after { background: url(https://images.squarespace-cdn.com/content/v1/5e9f52c…/1591746790510-TLM3OCA969QR248359Q9/ke17ZwdGBToddI8pDm48kNIz01GxeNglza_traDdevsUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKck_3oyjxD2E6g656zntaR4vQBwPCV_Yc9BnFEdXAQ6xzMr4wPFfphDwEQcs_2fgoE/Pavilion+House+Sect_wt-1.jpg?format=300w); content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 0.75s; } a[href="/alley-house-1"]:hover:after { opacity: 1; } Output: http://recordit.co/HDXB6rAspQ

Kindly check this snippet section[data-section-id="5ee902680f1cf9687c177bee"] { width: 100vw; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper { margin: 0; width: 100%; max-width: 100%; padding: 0 !important; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .content { width: 100% !important; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image { padding: 0; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image img { width: auto !important; height: 100% !important; }

It's ok bro, you good

Mine not jQuery, it's YUI library, goes along with Squarespace

This snippet will apply on all image grid site-wide .sqs-block-image { padding: 0 !important; } Or you can only need apply on home page only #collection-5ee237be059f9951fe95bf2c .sqs-block-image { padding: 0 !important; }

I assume you have a cards page like so, and your template already has YUI loaded https://www.crxssplatfxrm.com/selected-artists Working: http://recordit.co/TVbGuBsPBo Y.on('domready', function () { // Find the container of the grid item on your page var parentSelector = "#gridThumbs"; // Get the class name of the grid item, in common on all items share same class name, site-specific var itemSelector = parentSelector + " .grid-item"; // Get all the items var items = Y.all(itemSelector)._nodes; shuffleArray(items); items.forEach(function(el) { Y.one(parentSelector).append(el) }); // Shuffle the array function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } });

Glad it helps, you can mark it solved to help other people Here is reference site of the css3 selector https://www.w3schools.com/cssref/css_selectors.asp

I believe it is @media screen and (max-width: 800px) { .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-folder-content .header-menu-nav-item { display: block !important; } }

Let's us check your site for the actual issue in action

persimmondevelopment Can be via custom jQuery code, steps are: - Select the images via correct selector - Detach them from parent to keep the event stays, save in an array - Shuflle the array - Re-append them into the container

Hi So you want to reoder the first 2 images of a products and use them for the hover effect right? Like your reference https://mliuheart.com/collections/shop/products/c1001-1-marked-grey-tshirt

I saw you already solve it right?

We can set the fixed width anihavoc, but we need to check your site password

Yeah the code is site specific so I need to look at your site, maybe password protected?

Hi truelife, This is psuedo code, in case you need more specific please provide the site url for checking Target: https://alex-freund.squarespace.com/fashion Custom css: #projectThumbs .project:hover .project-image .intrinsic { opacity: .65; background: #000; } Result:

Hi lindsey123 Please make your site public so we can help