LeauxFi

I'm a novice but a code like this should work for you fine. I THINK your section ID for the top is the one I've provided in the code but I'm not sure. You should get the squarespace ID Finder for chrome to check it out and be sure which can be found here:
https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
 
Try adding this code to your Custom CSS which can be found by going to Pages > Website Tools > Custom CSS then pasting this:
 
//ADJUST TOP EMPTY SPACE ON GALLERY section[data-section-id="637c69fd66233c0143152add"] { margin-top: -30px !important; } Feel free to change the "margin-top: -XX" amount. Try adjusting by 10s at first to fit it to your liking. And if it has no effect at all, then its likely you have to get your own ID and the one I can see from your website is incorrect.

I seeeeeee and this worked perfectly. So I didn't understand the class to select either. I went ahead and added @media screen and (min-width: 800px) as well
 
Looks like I need to REALLY learn when to use "div.whatever" vs  ".whatever" vs "#blockwhatever" vs "fe-block-whatever" Thank you so much as always friend.  Thanks to both you AND @Ziggy

just did. I can use the spacers to shrink it down now for sure, but I can't make it take up the entire right side like I wanted now lol. I'm guessing the solution is some mix of CSS and the classic editor maybe?

All excellent suggestions above. Would also suggest creating some simple differentiation between what looks like 2 sections; Customized Health and Wellness Coaching & Testimonials.
Since they're both white, it leaves a big gap between the two sections. Design wise, I'd say shorten the gap between the two and either add a divider or separate them by using 2 different (complementary to her company or website's colors) background colors to the section. But its good!

Well done @eskimo! The design is clean and straightforward and has just enough info to get your wife started. I agree with @madebydave's suggestions above; additionally, I might put "Customized Health and Wellness Coaching" in the first section (rather than "Sadari Wellness") since the former more clearly describes the service that she's offering.

I'd also include a picture of her on the site so that folks can see who they'll be working with (something to consider for when you start sharing the site with folks outside of your family/friends circle).

You can use Anchor Links
https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

Hey @Emm 

Add the image block, and then the text block below the image, then add the following code to the image block, which should then add transparency to the image and show the text beneath.

@media only screen and (min-width: 640px)
{
#block-12345 {
opacity: 0 !important;
transition: opacity 1s !important;
}

#block-12345:hover {
opacity: 1 !important;
transition: opacity 1s !important;
}
}

Thank you! The one I'm working on now is better imo so I'll have to go back and fix my own later lol. But honestly just by searching thru the forums and learning the coding language myself from here a little bit. 
 
So for my site I used a combination of:
1- the main code telling the menu/header to change on scroll, and
2- defining the specific changes that take place on scroll (the icons and bar itself shrink to what size and how fast, then a second half defining what happens specifically on mobile devices) 
Heres the entire code I used to pull it off. Let me know if you want help adjusting it, or maybe if another person here on the forums can clean it up even more.
 
ENTIRE CODE:
//Menu style change on scroll header#header.shrink { background-color: black !important; transition: all 0.6s; } header#header.shrink a { color: white; opacity: 1; } header#header.shrink img { filter: invert(1); } header#header.shrink use { fill: white !important; stroke: white !important; } header#header.shrink .header-nav-folder-content a { background: #fffffff !important; color: white; } header#header.shrink .header-nav-folder-content { background-color: rgba(0,0,0,0.70) !important; } @media screen and (max-width: 767px) {header#header.shrink a { color: black; opacity: 1;} } //Menu Size and Icon Shrink @media screen and (min-width: 767px) { header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 40px; transition: all 0.3s; } } //MOBILE Menu Size and Icon Shrink @media screen and (max-width: 767px) { header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 30px; transition: all 0.3s; } .header * { padding-top: 2px !important; padding-bottom: 2px !important; } header#header.shrink { background-color: black !important; transition: all 0.4s; } }  
So in the first half of the code, it singles out the header and tells it what to do

I see you site are already same my demo
or you want navigation header under video section?

Tuan figured it out in another thread. Posting it here for visibility:
 
"First, you add a Section with Video Background
Next, use this code to Custom CSS. Replace article>section:first-child with section id
use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff"
article>section:first-child { height: 100vh !important; position: sticky; top: 0; padding: 0 !important; } article>section:first-child video { position: fixed !important; top: 0 !important; } article>section:nth-child(n+2) { z-index: 99999 !important; }  

No need to answer. I've figured this one out using the following code:
#siteWrapper { background-color: transparent; background-image: url(IMAGE URL HERE); } #page {background-color: rgba(255,255,255,1); mix-blend-mode: normal;}  

Use this CSS code (for homepage, if you want to apply for other pages, just remove body.homepage)
body.homepage header#header.shrink { background-color: black !important; } body.homepage header#header.shrink img { content: url(https://content.invisioncic.com/p289038/monthly_2024_01/AA-AminaAhmadLogo-FullName_StackedColorWhite.thumb.png.b31f91a834f1d45728a63db8a6f02d56.png); }

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS
a[data-folder-id]:after { content: "+"; } a.header-menu-controls-control.header-menu-controls-control--active span:nth-child(2):before { content: "<"; }  

agreed. doesn't seem like this was ever fixed. The carousel is unusable for me, and though the grid looks better... it doesn't have any controls. I just want to make a carousel that is cleanly spaced like the grid. seems impossible

Thanks Christy and Leaux, really appreciate the feedback here!

I think it looks very good, only critique I have is the font choice for the large sized font. It just looks plain and lacks personality imo. And since the font is so large, it really pulls attention. Mainly "Crafting Compelling Customer Journeys" and "We Bridge Creativity And Performance To Captivate Audiences And Boost Your Business's Bottom Line." fonts. I think a different font choice will elevate the page that much more

Use this code to Custom CSS
@media screen and (max-width:767px) { section[data-section-id="65786538301caa326ce2e675"] .gallery-grid-wrapper .gallery-grid-item { min-width: 25% !important; } }  

@sspec1004 @EmilyVanGils @Codality @Holland_Productions
As I tried to explain above, it is not possible to increase the technical quality of Squarespace-hosted videos. 
Squarespace employees don't routinely monitor this forum for feedback (see the guidelines - item 6) so if you'd like to pass on your feedback about video hosting, or make a feature request, you can do so by contacting Squarespace Customer Care.
Did this help? Please give feedback by clicking an icon below  ⬇️

Also having this issue… 1080P is pretty sub-par quality today. Pretty disappointing to be honest. Makes the great work on my home page video look wildly mediocre. S/O to whomever gave me a "warning" for this comment.

Ok I understand your dilemma now.

You need to write a media query for this to adjust the margin for the specific screen width range. Since it looks fine on desktop and mobile, but incorrect on Surface Duo I'd suggest trying this in your custom CSS
@media only screen and (min-width: 380px) and (max-width: 767px) { .fe-659205ad15f7844d8dbb253b { grid-template-rows: repeat(18 ,minmax(24px, auto)) !important; } } This should lower height.

Please let me know if it works.

 

Hey Emizilla,
I know this was back in February, so you probably already fixed the issue, but I found a suitable workaround. You can upload the video file to the custom files portion of your site when adding custom CSS. This is under Design > Custom CSS > Manage Custom Files. This will generate a static URL you can use.
Let me know if this helps!

hmmmm. i found that you're absolutely right, i was missing a "}" on line 53. So it was pulling it from another place which I guess meant everything in between was wrapped in the mobile-only ruleset. I fixed it.... but it changed nothing 😢 so i ask this... do any errors occuring BELOW the code we've been talking about (lines 76-84) effect it? As in, could a broken media/mobile code below here be the culprit?
 
 
EDIT: Found the culprit. The animation/javascript for that page was causing all the issues. It broke everything. I deleted it in its entirety and everything went back to working. I'm thinking the missing "}" was getting pulled from the broken animation script putting everything in between into mobile-only mode. once i fixed that...i can see a lot more things are broken but they're obvious. it'll be tedious, but its a RELIEF. I now know at least all the code didn't suddenly break, but instead the animation which I imported from outside broke. Go figure. This was the code responsible
 
/*Loading Animation from Will-Myers.com*/ #wm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.6s ease-in-out 0.3s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity .5s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/ //FIX ME @media screen and (max-width:767px) { #REMOVEMEwm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.5s ease-in-out .2s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/

The reason the following CSS ruleset only works on mobile is that it is contained in a media query ( @media screen and (max-width: 768px) ) The media query is saying only apply the contained rulsesets on viewports 768px or less.
  section[data-section-id="637c4a75c10b4a517ecbd275"] span[style*='underline'] {     color: red;     text-decoration: none !important;     font-size: 23px   } For CSS you want to work on both desktop and mobile don't wrap in a media query. If you go back several rulesets from the one I show, you will find the media query.
Perhaps the general issues you are having with code not working is rulesets being wrapped in media queries when you don't want them to be.
Let us know how it goes.

At the bottom of your CSS panel, is there an error message in red? CSS won't work if there is an error.
This line here doesn't look right. It's missing a semi-colon. 

It's best to always use a semi-colon, even if it is not needed for the last CSS style. To avoid this like this from happening.
Edit: this looks suspicious also. Think you are referring to the class, if so, you are missing a dot for the class name. (see the line below which is selecting the class name with a dot)

There are still errors in your CSS. Have you looked at my screenshots above and rectify those as a start? Your CSS won't work as expected if there are errors.
You need to fix all the errors before investigating individual issues.
If you are still struggling, I suggest hiring a developer to help you. Unfortunately code needs maintaining, not just SquareSpace but all software code regardless on what platform, so if you can't maintain yourself then this won't be the last time you run into issues.