-
Posts
29 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Mark.Hook
-
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; } }
-
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; } }
-
Can you give me a screenshot of the whole page?
-
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; } }
-
Mobile-specific homepage background troubles
Mark.Hook replied to Hope_Dean's topic in Customize with code
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>- 2 replies
-
- background
- homepage
-
(and 1 more)
Tagged with:
-
CSS for rounded corners of uploaded videos?
Mark.Hook replied to taylahroberts1's topic in Customize with code
No problem at all. Glad I could help. -
CSS for rounded corners of uploaded videos?
Mark.Hook replied to taylahroberts1's topic in Customize with code
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; } -
Make each navigation option text a different colour
Mark.Hook replied to Jukebox's topic in Site Design & Styles
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; } -
If you want to post a link to your website then this should be pretty simple to do with a little css.
-
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.
-
Need help changing color of hamburger menu on mobile site
Mark.Hook replied to EJ119's topic in Customize with code
Plug this into your Custom CSS and see if it does the trick... .burger-box .burger-inner div { background-color: white !important; }- 2 replies
-
- hamburger
- hamburger-icon
-
(and 1 more)
Tagged with:
-
need help with a code for element in header
Mark.Hook replied to DragonaFlooring's topic in Fonts, colors and images
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; } } -
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
-
remove header from mobile only and stop video from cropping
Mark.Hook replied to a topic in Customize with code
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; } } -
Change menu to burger menu icon flatiron template
Mark.Hook replied to mactas's topic in Customize with code
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%; } -
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"