srmdesign

EDIT: I'll upload the original image file in case it helps.

Hi, I've been have issues with certain images appearing pixelated when not in editing mode - the images appear fine when in editing mode. Also, settings the images to fit seems to fix the issue for some, but not all, images. The images below shows the image when in editing mode (left), and after exiting editing mode (right): As you can see it appears significantly more pixelated. I have also tested by viewing the page from an incognito browser, in case viewing through the squarespace dashboard was affecting the images. The image above has been formatted to squarespace guidelines, 1500px by 1500px, PNG, with a DPI of 72ppi. I have also tried formatting differently, including 2000px by 2000px, 300px by 300px, different DPIs (72-300ppi), different formats (JPEG), different anti-aliasing (text optimised, art optimised, and none), none of which solve the issue. The issue also occurs with stock images obtained through squarespace, see below for an example (before - left, after - right): This leads me to believe the formatting of my images is not the issue, but instead the way squarespace resizes images is causing it. Does anyone know how I might be able to fix this? Thanks in advance.

@Web_Solutions Sorry, must have forgotten that in my original post - it's https://piccolo-parakeet-wae7.squarespace.com/ Thanks!

Hi, I have several images, each with a hover on reveal text overlay, that I am trying to scale when the text overlay is revealed (when hovered over). As the text overlay blocks are not children of the image blocks, I don't seem to be able to use CSS to achieve this effect. I have written a working jQuery script for one of the image/text overlay pairs, using the block IDs, but I would like this to apply to all of the image/text overlay pairs separately (i.e hovering over the text overlay only scales the image behind it). jQuery(document).ready(function($) { $('#block-87c1fe8e75500f1b9d23') //text overlay block ID .hover(function(){ $('#block-11cef41ff9676fa4c43d .content-fill') //image block ID and image class .css({ transform: 'scale(1.2)', WebkitTransition : '0.2s ease-in', MozTransition : '0.2s ease-in', MsTransition : '0.2s ease-in', OTransition : '0.2s ease-in', transition : '0.2s ease-in' }); }, function(){ $('#block-11cef41ff9676fa4c43d .content-fill') //image block ID and image class .css({ transform: 'scale(1)', WebkitTransition : '0.2s ease-out', MozTransition : '0.2s ease-out', MsTransition : '0.2s ease-out', OTransition : '0.2s ease-out', transition : '0.2s ease-out' }); }); }); I could repeat the jQuery for each image/text overlay block ID, but that seems unnecessarily long. Is there a shorter way of writing this so that all images have the same scale on hover effect, separately? I tried using DOM traversal methods (see below) and managed to successfully target the images using the chrome developer tools console, but using this in the jQuery script didn't seem to work. Chrome developer console output: DOM traversal script: jQuery(document).ready(function($) { $('.sqs-block-html').hover(function(){ $('.sqs-html-content p').closest('.fe-block').siblings('.fe-block').find('.content-fill') .css({ transform: 'scale(1.5) !important', WebkitTransition : '0.2s ease-in', MozTransition : '0.2s ease-in', MsTransition : '0.2s ease-in', OTransition : '0.2s ease-in', transition : '0.2s ease-in' }); }); }, function(){ $('.sqs-block-html').(function(){ $('.sqs-html-content p').closest('.fe-block').siblings('.fe-block').find('.content-fill') .css({ transform: 'scale(1) !important', WebkitTransition : '0.2s ease-out', MozTransition : '0.2s ease-out', MsTransition : '0.2s ease-out', OTransition : '0.2s ease-out', transition : '0.2s ease-out' }); }); });

Thank you very much, works great! The only thing was the fluid engine id (fe) was targeting the accordion in the main page body, instead of the footer, but I've changed the id and it works great now.

I'm trying to expand the accordions in my footer by default, only on screens above 992px, and have the accordions closed by default on screens less than 992px (mobiles, tablets, etc). The code provided here (https://forum.squarespace.com/topic/213605-how-can-i-display-an-open-accordion-block-item-by-default/?do=findComment&comment=537793) works great for the previous goals, but after adding it I cannot close the accordions on desktop, so they are stuck open. I'm just wondering if there is any way of expanding the footer accordions on page load, by default, but still allowing the accordions to be closed after the initial page load. You can find my website here: https://piccolo-parakeet-wae7.squarespace.com/ Thanks in advance for reading, and for any advice you can provide. The css I've used for my footer is below: //footer font styling section[data-section-id="6525721f7e51e4600e4a93ab"] { .accordion-item__title { font-size: 0.85em !important; } //accordion plus sizing .accordion-block .plus__vertical-line, .accordion-block .plus__horizontal-line { width: 0.8em; } //don't expand accordion on mobile @media screen and (min-width:992px) { .sqs-block-accordion .accordion-item__dropdown { display: block; } } }