Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by MAC1

  1. 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 -->
  2. 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
  3. 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
  4. Beautiful works perfect thanks again @tuanphan
  5. 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
  6. 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
  7. 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
  8. 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
  9. https://ellipse-teal-dl5w.squarespace.com/illustration Sure here's the link thanks. Here's the css code I applied to the portfolio pages also to get stroke border: /*PORTFOLIO HOVER_________________*/ /* Show stroke border overlay on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid rgba(66,198,255,0.8); /* change border color here */ transition: all 0.3s; opacity: 0; box-sizing: border-box; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } /*PORTFOLIO HOVER END______________*/ //-----------------------------------
  10. Hi, I've made a "Latest work" gallery (grid:simple) block on my home page. I'd like each image link to have a "hover" property like on my portfolio pages. Current layout: hover does nothing different and text description padding is too low on image. After changes: 1. padding on description text is closer up on image 2. Description text is this color #656565 3. Hover over stroke color #42c6ff + 5px stroke + image 20% bigger like in portfolio pages (motion/design/illustration) Desired look: Web: https://ellipse-teal-dl5w.squarespace.com/ Pass: 3 Cheers, Mac
  11. awesome thanks , had to add !important; and works great. cheers .portfolio-grid-basic .portfolio-title { color: #393939 !important; }
  12. Hi, I want to make the captions under the gallery items to be a lighter grey color. Tried a few css but this is as far as i got and its not working. /* Change the color of portfolio caption text */ .sqs-block-portfolio .portfolio-text { color: #393939 !important; /* Change this hex code to the color you desire */ } Any ideas how to get this code working? Cheers, Mac web: https://ellipse-teal-dl5w.squarespace.com/design pass: 3
  13. /* Apply padding to all Line blocks */ .sqs-block-horizontalrule { padding-top: 20px !important; /* Adjust as needed */ padding-bottom: 20px !important; /* Adjust as needed */ } I found something that works its ".sqs-block-horizontalrule" targets all lines with proper alignment text top (bottom alignment), line (middle align), bottom text (top align) , the line spacing stays the same with the padding code attached. thanks @Ziggy
  14. Hi, I've been playing around with padding/spacing a line under text. Issue is the line padding changes depending on size of screen. I was wondering if there was some universal css code for the line block so its always has the same padding top and bottom. keeping everything well spaced to the desired design. not sure if something like this would work, just need to target the line block if i knew the right targeting. /* Apply padding to Line blocks */ .sqs-block-line { padding-top: 50px; /* Adjust as needed */ padding-bottom: 50px; /* Adjust as needed */ } web: https://ellipse-teal-dl5w.squarespace.com/design/glitch-mx pass: 2 thanks some extra information just in case below-- full width line padding between text is fine: half width page line padding reduces more on top than bottom reduce more and line goes too close to top title:
  15. ahh thank you again, looks much better :) have a good one cheers
  16. Hi, the default padding on the grid gallery is too much. how can I reduce top/bottom for all gallery: grid simple on the whole website? cheers web: https://ellipse-teal-dl5w.squarespace.com/design/glitch-mx pass: 2 Thanks
  17. Everything is fixed thank you for that, except its created one more new issue now with the middle information on pages: information gets cut off now, where it didn't before: the information at certain widths doesn't align with the header/footer. which didn't happen before: sorry for this last part, everything is so close to working though
  18. Yes the header is fixed thankyou i was just making this video as you fixed it. only issue is the porfolio grid now. the header looks great. any idea how to fix the portfolio grid popping out? thanks again for your time
  19. the header and portfolio grid are still not aligning. did you change some css?
  20. @DPruitt It might have something to do with this code, hope this helps: @media only screen and (min-width: 1656px) { .tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic { padding-left: 0 !important; padding-right: 0 !important; width: 1600px !important; } .header-width-inset .header-inner { width: 1600px !important; } .header .header-announcement-bar-wrapper { padding-left: 0 !important; padding-right: 0 !important; } } this code was to help the gallery block align to the header in inset mode because it looked like this before the code:
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.