Jump to content

Mark.Hook

Circle Member
  • Posts

    29
  • Joined

  • Last visited

Everything posted by Mark.Hook

  1. Ok, sorry for all the responses, but this code should actually work better. It's very similar to what's above, but a bit more sound. @media screen and (min-width:800px) { .sp-headline.slide span { vertical-align: top; } span.sp-words-wrapper { width: 500px !important; } h6.sp-headline.slide { margin-top: 20px; } .sp-words-wrapper b { white-space: nowrap !important; } }
  2. Actually, I may know what's happening. Try this and see if it gets it closer... @media screen and (min-width:800px) { .sp-headline.slide span { vertical-align: top; } span.sp-words-wrapper { width: 550px !important; white-space:norwrap !important; } h6.sp-headline.slide { margin-top: 20px; } }
  3. Can you give me a screenshot of the whole page?
  4. Try plugging this into your Custom CSS and see if it does the trick for you... @media screen and (min-width:800px) { .sp-headline.slide span { vertical-align: top; } span.sp-words-wrapper {width: calc(100% - 250px) !important;} h6.sp-headline.slide { margin-top: 20px; } }
  5. Take that out of your Custom CSS. Go to the page settings for your home page and click Advanced. Then paste the below code into that advanced section. <style> @media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/63dae753e414bb1eb631a600/t/641de9bf1c36f47c6fbfcd08/1679681983588/invisiblehigher.png); background-size: cover; background-position: center; background-repeat: no-repeat; } } </style>
  6. No problem at all. Glad I could help.
  7. Put this in the Custom CSS section of your website and see if it does the trick... .video-player .plyr video { object-fit: cover !important; border-radius: 10px !important; }
  8. Plug this into your Custom CSS and see if that's what you are looking for... Obviously, you can change the colors in the css to anything you want. nav.main-nav ul > li:first-of-type a { color: red !important; } nav.main-nav ul > li:nth-of-type(2) a { color: blue !important; } nav.main-nav ul > li:nth-of-type(3) a { color: pink !important; } nav.main-nav ul > li:nth-of-type(4) a { color: orange !important; } nav.main-nav ul > li:nth-of-type(5) a { color: aqua !important; } nav.main-nav ul > li:nth-of-type(6) a { color: green !important; }
  9. If you want to post a link to your website then this should be pretty simple to do with a little css.
  10. Can you provide a link to the website you are building? If it's still in development, just set visibility to password protected and provide the password as well.
  11. Plug this into your Custom CSS and see if it does the trick... .burger-box .burger-inner div { background-color: white !important; }
  12. Try plugging this into your custom css and see if it works for you... /* This controls color and blink speed on desktop */ .header-nav a[href*="crazy-deals"] { color: yellow; animation: blinker 1s linear infinite; } /* This controls color and blink speed on mobile */ .header-menu-nav-folder-content a[href*="crazy-deals"] { color: red !important; animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }
  13. I had to do this on a client's site a few weeks ago and noticed Squarespace does not appear to have built-in functionality for this. I ended up using a slideshow block with several blank images. I then put the quotes as the captions for the image and used css to hide the images and just show the quotes. I've attached a video of what it look likes so you can see if that's the same functionality you are looking for. Screen Recording 2023-02-23 at 12.29.48 AM.mov
  14. You can remove the header on mobile with the code below. Just add it to your custom css. Your video is setup as a background video so it's designed to fill the entire space, which results in the cropping. While it will still be cropped a little, you should be able to click the phone icon in the top right corner of your website to edit the mobile view and increase the size of your grid so the video presents itself better. I've included a screenshot of the icon I am talking about if you're not familiar with it. @media screen and (max-width:799px) { .header-announcement-bar-wrapper { display: none !important; } }
  15. Try plugging this into your custom css and see if it does the trick. You can upload your own hamburger icon into your custom files and use it by replacing the url in the "background-image" value. #mobile-navigation #mobile-navigation-label:after { color: transparent; background-image: url(https://static1.squarespace.com/static/63f692c4eeb45a2b7e8c96c1/t/63f69485d05aa216add223f4/1677104261757/hamburger.png); background-size: contain; background-repeat: no-repeat; background-position: 50%; }
  16. For a quick fix, you can try plugging the below code into the Advanced tab of your homepage settings... <style> @media screen and (max-width: 799px) { .burger-inner > div { background-color: black !important; } .header-menu-nav-folder.header-menu-nav-folder--active { background: #dfd40e; } } </style> There's a chance your header is set to dynamic background and trying to adjust the background based on the color theme of your first page section. You may take a look at the Header settings > Style and select "Solid"
×
×
  • 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.