jbellissimo

That worked! Thank you so much. I appreciate everyone's help!

Thanks for your help! I did this: Doing so made it "disappear," meaning it was probably small and invisible. Am I meant to use that in combo with your earlier suggestion of CSS? And then perhaps increment my way to match the nav menu text size using the CSS? Also, if not using negative margin controls, what's another way to adjust the vertical position of the logo/img to the nav menu? Padding or something like that? Again, I appreciate your help!

My apologies - I totally missed this very specific question. It's currently set at 20, but I believe it was set at 50 when I first posted my question. Thanks!

Thank you so much! It's not quite working, but I can tell we're hot on the trail! This is how I interpreted and implemented what you provided with the appropriate IDs in place: .section-border:not(#section[data-section-id="65393dcae0880046ad5fd22a"]){opacity:0!important} .site-wrapper:not(#collection-65393603c19fc514aa0b48bc){background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} This is my site, so you wanted to see how it's currently behaving with this code in place: https://www.bellissimoeditorial.com And here's a screenshot of the relevant IDs revealed: I'm showing the background video in this example image so you can see the section I'd like to reveal, but it's not currently displaying. I hope this all makes sense and that whatever is in error is easily solved. Thanks again for your help! Jay

I've had CSS code stop working when I changed to a different animation (specifically "flex") within the site styles of the template. It might be worth checking. Good luck!

Hello! I'm using a gradient on all of the pages on my website generated using CSS: .section-border{opacity:0!important} .site-wrapper{background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} But I would like to omit this on my homepage to feature a background video. The video is in place, but the CSS code blocks it. Any help is appreciated. Thanks, Jay

OK. I see what it's doing, and I think I like it. Is there a recommended "Logo Height" in the Squarespace Global settings for Site Title & Logo? Understood regarding negative values in the margin. Given that advice, what's a good way to make the logo and menu text appear that they're sharing the same baseline? As it is, they don't seem to relate: I tried padding the image early in the process to control vertical alignment, but that was a bust.

I'm not totally sure I understand whether this code is meant to control the margin, which you commented on most recently, or to the original post. In the meantime, I'll drop it in and see the effect it has.

Thanks! The website is https://www.bellissimoeditorial.com The native logo size is 1350x310. -------------------------- I've tried controlling it with CSS telling it to be a particular size at a certain screen width, but it doesn't seem to have the desired effect. I picked a crazy pixel width to make the results obvious. The current state is sort of random. @media screen and (max-width: 1920px) { .header-title-logo img { max-height: 53.5px; } and an attempt to match the vertical alignment @media screen and (max-width: 1920px) { .header-display-desktop .header-title-logo { margin-top: -30.1px; } }

Hi! Let me first state that I've tried to find this answer on my own AND that I am, at best, merely familiar with CSS in that I can copy-paste existing code and understand enough to alter it to meet my needs. So, I'm still very much a beginner. I was silly enough to base my logo on the same font that I'm using across my site (Lato), which has inextricably (to me, anyway) created an implied size relationship between my logo and the navigation menu in my header. The relationship above isn't perfect, but it's close enough for demonstration. Now, as the browser window sizes change and stray away from my laptop screen size (1440x716), the logo is slightly smaller or larger than the opposing navigation menu, like so: 1920x1080 - logo slightly smaller and 1024x1366 - logo slightly larger I've experimented with using @media queries to size the logo at various screen stages. Still, I'm curious as to whether there might be a way to use CSS to make the image constantly aware of the relative size of the font/navigation menu as it gradually increases and decreases in size when the window is sized up and down. Likewise, perhaps it's possible to make adjustments based on the size of the viewport units (vh, vw, vmin, vmax, etc.) What do you think? Also, regardless of the @media queries and how I've tried to construct them using ranges, they are overridden in some cases by what seems to be some underpinning built into the template or responsive layout system that makes the image/logo jump sizes for instance, at 1920. I'm pretty sure I was using !important to force my choice, but I can't say. Despite trying to be systematic, sometimes I'm just flailing, trying things, and then dumping them when they don't work, so I can't say for sure. Thanks for reading this far. Any help is appreciated. Thanks, Jay

For my specific need, alladinsane nailed it: I have highlighted text within a text block intended to take the user to a third-party website. Not only is it several steps, it's easy to miss one of the steps - for me, it was clicking on the "Apply" button.

Hi! I was getting disappointing results from my site on my iPhone's native Safari browser; Chrome and Firefox worked just fine. The issue I was having was that the site font was being switched out to what appeared to be Times (or some other serif font), and I also couldn't get videos to playback. I don't know what prompted me to try changing the settings, but by poking around and turning various settings on and off in the Safari app, I eventually worked my way to content blockers that had been installed or perhaps are built-in (?) (Settings/Safari/Extensions) and found a content blocker called Firefox Focus turned on. Once I turned it off and reloaded the site, the fonts displayed correctly, and the videos displayed and played as expected. However, it's worth noting that since I'm using the Video Lightbox Plugin, the videos required tapping on them twice: Once to pop them up and another tap to play them. Hopefully, this helps someone else who may be having similar problems. Cheers!

Sorry, but removing basic and often-used functions when upgrading a product contradicts what any logical-thinking person would expect. Shouldn't functionality and capabilities improve as version numbers are incremented (7.0 -> 7.1)? Admittedly, the fluid engine has improved the ease and flexibility regarding layout, but yeeeesh. I'm going to continue upgrading my site to 7.1, but I don't like having to scour the internet for CSS override solutions and/or paying for plug-ins (Video Lightbox Plug-In) to roll forward functionality from my old site to the "new and improved" 7.1. Sigh

@BarbadosLover, I don't see the black lines currently around the only video I find on your front page. Have you solved it, or am I not looking in the correct place? Regardless, black lines around the edges of the video are typically baked into it. This happens during the editing and/or exporting process. Some video cameras and other sources don't always completely fill out all the pixels of the editing sequence (video export) pixel aspect ratio (PAR). This may occur if there's a PAR mismatch between the source video and the edit sequence/export settings. Additionally, editing apps tend to have dark interfaces, and it's very easy to miss when source images aren't filling out the entire screen until it's exported and showcased against a light background. Sometimes, you can change the brightness of the editing interface to aid in catching and correcting the dilemma (by scaling up the image) before exporting. Or, perhaps it's something that's being induced by the site template. Good luck!