Jump to content

MattInTheBox

Member
  • Posts

    5
  • Joined

  • Last visited

Everything posted by MattInTheBox

  1. Site URL: https://www.michaelbidak.com I'm trying to change the header tiktok icon to this HEX color #ece7da
  2. Sorry about that, it's actually live currently at rightworksinc.com
  3. Site URL: https://scarlet-grape-g5ln.squarespace.com I'm trying to get my hamburger menu operate properly on mobile. Two issues about it are that it's pulling up "The Burger >" instead of the direct menu and the second issue is the transparency, I can't seem to get it to be white and not transparent.
  4. Site URL: https://scarlet-grape-g5ln.squarespace.com I need help with centering my home page's first video that autoplays on mobile without affecting the desktop version. On mobile, it only shows the bottom right corner of the video but in the top left corner of the block. My current code that I am using for this is below (from @codeandtonic @8640-codeandtonic) /* Section background image 16:9 video */ //show on mobile section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display: block; } // show on desktop html.no-touch section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display: block !important;} section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { //16:9 spacer padding-bottom: 56.25%; min-height: 0 !important; .section-background .sqs-video-background iframe { //make it the size of parent no matter what automatic JS it would like to do border-width: 0; position: absolute !important; top: 5.5vh !important; left: 0 !important; bottom: 0 !important; right: 0 !important; height: 10vh; width: 100% !important; height: 100% !important; } // blocks would be here but we won't have any .content-wrapper{ display:none !important; } }
  5. Site URL: https://scarlet-grape-g5ln.squarespace.com/ Hi there, I was looking for help with making a video full-bleed responsive with the website edge to edge. I also want it to work for both desktop and mobile. I have two examples running on my page right now. There was one where I am running it as a background video using BUT it wasn't centering properly. Part of it was being cut off by the header and it wasn't centering on the mobile properly either /* Section background image 16:9 video */ //show on mobile section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display:block !important; } // show on desktop html.no-touch section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display: block !important; top: 0 !important } section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { //16:9 spacer padding-bottom: 56.25%; min-height: 0 !important; .section-background .sqs-video-background iframe { //make it the size of parent no matter what automatic JS it would like to do border-width: 0; position: absolute !important ; top: 60%; left: 60%; margin-right: 0%; transform: translate(-50%, -50%) } // blocks would be here but we won't have any .content-wrapper{ display:none !important; } } I was currently using this (a code of yours that I found in the past) in the CSS for the second version of the video underneath the one that is currently full-bleed /* Video fullwidth */ [data-section-id="6103292e6ee0aa3483fa6e22"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } Website: https://scarlet-grape-g5ln.squarespace.com/ P: doormat123
×
×
  • 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.