-
Posts
29 -
Joined
-
Last visited
Personal Information
- Website
-
Location
Springfield, MO
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Mark.Hook's Achievements
-
PartTwoDesign reacted to a post in a topic: CSS for rounded corners of uploaded videos?
-
paul2009 reacted to a post in a topic: CSS for rounded corners of uploaded videos?
-
tuanphan reacted to a post in a topic: How can I hide or remove the icon in an accordion ?
-
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; } }
-
Mark.Hook reacted to a post in a topic: Mobile-specific homepage background troubles
-
Can you give me a screenshot of the whole page?
-
Mark.Hook started following Need help changing color of hamburger menu on mobile site , Looping rotating words - FIX THE WRAPPING , Mobile-specific homepage background troubles and 4 others
-
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. -
taylahroberts1 reacted to a post in a topic: CSS for rounded corners of uploaded videos?
-
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%; }