MAC1

Hi, I have a issue with my custom buttons. The button becomes too small on different widths: Large monitor looks fine, button is full size On a smaller monitor the image scales down too much, I want to keep it at 100% the whole time (like how buttons in squarespace behave): Is it how i've set it up? can i add css that keeps the button at a suitable size? Web: https://ellipse-teal-dl5w.squarespace.com/ Pass: 04 Here is the button code at the moment, the hover works and the animated scaling also: /* GET IN TOUCH BUTTON*/ div#block-yui_3_17_2_1_1701485718961_2891 { overflow: hidden; position: relative; } div#block-yui_3_17_2_1_1701485718961_2891 img { transition: transform 0.5s ease, opacity 1s ease; display: block; width: 100%; height: auto; } div#block-yui_3_17_2_1_1701485718961_2891:hover img { transform: scale(1.05); opacity: 1; content: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/94faff05-9d93-477d-952d-4ac5f8579fa3/BUT_getintouch_ON.png); } Appreciate any support on this Cheers, Mac

Looks great thankyou

Hi, Page: https://ellipse-teal-dl5w.squarespace.com/ Pass: 04 I have a awards section that looks great on desktop at its smallest width, still readable and spaced nice. But on mobile phones it looks like this, which is too small and the spacing is too much. How can I control the size and spacing of the award pictures when it gets to mobile, so that its not tiny. Maybe restrict it to a certain percentage? Cheers, Mac Here is the code the section is using =================================== GALLERY AWARDS CODE =================================== */ /* Gallery awards - Desktop */ @media screen and (min-width: 1100px) { section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper { grid-template-columns: repeat(7, 1fr) !important; padding-top: 13px !important; padding-bottom: 40px !important; } section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img { /* Reset or remove scale transformation on hover */ transform: none !important; } } /* Gallery logos - Mobile */ @media screen and (max-width: 900px) { section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper { grid-template-columns: repeat(5, 1fr) !important; gap: 40px !important; padding-top: 13px !important; padding-bottom: 40px !important; } section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img { /* Reset or remove scale transformation on hover */ transform: none !important; } } /* Gallery logos - Mobile */ @media screen and (max-width: 767px) { section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper { grid-template-columns: repeat(4, 1fr) !important; gap: 80px !important; padding-top: 13px !important; padding-bottom: 40px !important; } section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img { /* Reset or remove scale transformation on hover */ transform: none !important; } } /*

Brilliant, thank you so much! works great!

/* =================================== LINE PADDING CODE =================================== */ /* Apply padding to all Line blocks */ .sqs-block-horizontalrule { padding-top: 10px !important; padding-bottom: 10px !important; } /* Reset padding for specific element with ID */ body:not(#block-yui_3_17_2_1_1691745460420_38410) .sqs-block-horizontalrule { padding-top: 0 !important; padding-bottom: 0 !important; } web: https://ellipse-teal-dl5w.squarespace.com/motion/wellfamily-3wcx4 pass: 04 Hi, I'm trying to have universal code on all my line padding. Except for the footer line. The footer line block is #block-yui_3_17_2_1_1691745460420_38410. I've tried a bunch of code variations to no avail. The "body:not" code is resetting all the lines not just the the footer line like i would like. Something is wrong with the code. Need some help to learn the right way to exclude elements when universal code is applied. Cheers

I tried javascript code injection into the footer, it doesn't work but is this close or help find a answer? <!-- PIP FIX --> <script> document.addEventListener('DOMContentLoaded', function() { var sectionId = '64d255619ec2f716e2c78975'; var section = document.querySelector('[data-section-id="' + sectionId + '"]'); if (section) { var videos = section.querySelectorAll('video'); videos.forEach(function(video) { video.addEventListener('enterpictureinpicture', function(event) { event.preventDefault(); // Prevent entering PiP mode }); video.addEventListener('leavepictureinpicture', function(event) { // Handle events when leaving PiP mode if needed }); }); } }); </script> <!-- end PIP FIX -->

Hi, thanks for your time. Yes I've tried the section height min to L and manual vh. That fixes the issue, but has too much spacing top and bottom design wise. I'd like to keep the small spacing at full screen and then when the width is smaller like this: I'd like the spacing to be dynamic and center the contact form like this: So some sort of dynamic spacing css code when the window is a certain width? Cheers

Hi, page: https://ellipse-teal-dl5w.squarespace.com/contact pass: 04 I have a issue on my contact page. The background image is a full bleed background. But at certain px width it will crop the bottom moon in the image with a grey bar instead: Bigger size full bleed looks great: As soon as we resize the screen, it introduces a grey bar and cuts/crops out the full bleed image effect : on mobile looks great and doesn't crop the bottom part of the bleed, the moon etc: Appreciate all the support given on this space, hope you can help. Cheers

Beautiful works perfect thanks again @tuanphan

Hi, home page: https://ellipse-teal-dl5w.squarespace.com/ pass: 04 Issue is on homepage: I was able to get my home page gallery elements correct in spacing and columns with css. But in mobile mode, I'm having trouble with aligning the 2 gallery grid elements to the "inset" edge like every other element on my home page: Gallery grid Id in question: section[data-section-id="651f41fea4b86457aeca31fd"] section[data-section-id="65c04f34561f77483f011ccb"] on desktop mode its fine. but on mobile mode it doesn't go to the edge: Had a look and tried some code but nothing I found works. Appreciate any advice and help on this. Cheers

I'm using firefox to find the issue on my device windows. But its happening on a few MAC devices with safari also. Chrome windows seems fine now which is great. Just wondering if its possible to make sure there is a hard lock on the PIP for other devices. Any way to target the PIP with css etc? Cheers

Hi, How would i disable the "picture in picture" icon on the video background on my home page? is this possible? searched for hours with no answer. certain browsers display it and throws out the design + don't want anyone playing/breaking the website this way. web: https://ellipse-teal-dl5w.squarespace.com/ pass: 04

Thank you works perfectly, looks great!

Hi, Wesbite: https://ellipse-teal-dl5w.squarespace.com/ Pass: 04 I'd like to have a custom button like this: and a hover state like this: Button on the home page that needs css: What css code would I need? Would I use a image block or a button block? and customise it with css? Thanks

thank you works lovely! have a good one! :)