Alexsh

Hey melody495 - thank you for your reply. The one-line form is at the end of this page: https://sh.consulting/email-security The password is AAA!!! Thank you!

Hi everyone! I'm really hitting a wall trying to get text to center in a form field on my Squarespace site. I've tried pretty much everything I can think of with CSS and JavaScript, but nothing's making a dent. Here's the scoop on what I've been up to: What I'm Trying to Do: Just trying to get any text that's typed into a specific form field to be center-aligned. Sounds simple, right? What I've Been Up To: Going Specific with CSS: Started off by targeting the form's unique block ID (.fe-block-yui_3_17_2_1_1700432464042_13281) and threw in some CSS to center the text (text-align: center;). No luck there. Trying a Broader Approach: Decided to widen the net with a more general selector: .form-wrapper .field-list .caption-text. The idea was to catch the form field without just banking on the block ID. Still no dice. Pulling Out the Big Guns with !important: Even tried to force it by using !important in my CSS (text-align: center !important;), thinking it might override something else that was in the way. Nope. Back to Basics: Thought maybe I was missing something obvious, so I tested just applying an italic style (font-style: italic !important;) to see if any CSS would work. Weirdly, even that didn't do anything. Taking a Crack at JavaScript: Figured maybe CSS just wasn't going to cut it, so I tried JavaScript. Wrote a little script to apply text-align: center; to the input fields. But, guess what? Still stuck with left-aligned text. So, that's where I'm at. It's like whatever I do, the text just wants to stick to the left. If anyone's cracked a nut like this before or has any tricks up their sleeve, I'm all ears! Thanks a ton in advance! Alex

Hey melody495! Sorry, but I didn't get it. CSS works when the block containing the text that needs to be displayed is next to the block I hover over. However, if I change their order, the CSS no longer works — this confirms what you initially suggested about the "~" selector. When you mentioned deleting and recreating it, what exactly did you mean? I tried that, but it didn't work. The reason is that the order of the blocks is important, not the sequence of their creation... Or did I perhaps misunderstand you?

melody495, You're a genius! That was really because of the CSS selector "~" and the before/after pseudo-elements. It seems like there's no pure CSS solution for revealing the text in the blocks sitting before the hover blocks.

Thank you, creedon!!! I'm facing an issue where targeting the "yui" prefixed block doesn't activate the hover effect I want. To achieve this effect, it seems I need to target a block ID without the "yui" prefix, which I'm unable to locate. For instance, consider the large black box with the text "Hijack your email address and represent themselves as you." The hover effect works there because I'm targeting the block ID ".fe-block-1b8f20a1de12b8a688ab." However, if I try to target its corresponding "yui" ID, which is "yui_3_17_2_1_1696246643060_14857" for the same block, the hover effect fails. This issue repeats with the first big black box containing "Read your emails and alter their content." Using the "yui" prefixed ID doesn't trigger the hover effect. To sum up, targeting the block ID ".fe-block-yui_3_17_2_1_1696246643060_14380" does not initiate the hover effect — the text doesn't reveal when hovering over "DNS Hijacking," which is linked to the block ID ".fe-block-4f568e01d51dbe580861."

Thank you, creedon! Your response is truly appreciated. The idea of targeting the FE wrapper via a class name is great, but the problem is that I couldn't figure out the specific FE block for #block-yui_3_17_2_1_1696246643060_14380. I've tried using both the Squarespace ID Finder and inspecting every single block on the page in Inspect mode, but I still can't determine which block I should target instead of #block-yui_3_17_2_1_1696246643060_14380... I am trying to target the block that is highlighted in red in the screenshot.

Thank you, melody495! Thanks, that's great advice and already I have this in place, but it still shows me the #block-yui_3_17_2_1_1696246643060_14380 ID...

Hello, I've noticed that many blocks on my website start with "block-yui"; however, they often have their analogs represented as "fe-block." For one specific "block-yui" block, I don't have an "fe-block" analog, which means I can't use that block in the CSS code—it doesn't work properly when I target the "block-yui" ID. Is there any chance I can target the "fe-block" ID instead of the "block-yui" ID? Example: The analog for the block "block-yui_3_17_2_1_1696246643060_14857" is "#block-1b8f20a1de12b8a688ab" No analog exists for the block "block-yui_3_17_2_1_1696246643060_14380" Website: https://sh.consulting/email-security Password: AAA!!! I am trying to make the following CSS work: when I target the #block-yui, it does work properly, but if I target the #block-, it doesn't work as needed. This issue occurs in two similar cases when targeting the #block ID. .fe-block-4f568e01d51dbe580861:hover ~ #block-yui_3_17_2_1_1696246643060_14380 { opacity: 1 !important; } #block-yui_3_17_2_1_1696246643060_14380 { opacity: 0 !important; } Any insights on this will be greatly appreciated! Thank you, Alex

Thank you!!!!

Thanks!! But is there a chance to make this work using CSS only, with no JS?

Yes, exactly! To be more specific, hover over the 'MITM Attack' block to reveal the block on the right. Similarly, in the block below, hover over the 'DNS Hijacking' block to reveal the block on the left, and so on. However, the revealing function doesn't work when hovering. I can hide text in the right block, but it doesn't get revealed when I hover over the 'MITM Attack' block. Do you have any idea why it's not revealing? Thank you!!!

Hi, Thank you for your response. My apologies for somehow missing it earlier. https://sh.consulting/email-security Password: AAA!!! There's a section titled "They Can". The idea is to make when someone hovers over (or clicks) the text in the blue area that resembles a button (e.g., "MITM Attack"), an explanation appears adjacent to this block (for instance, "MITM Attack explained"). Already not sure if possible to implement w/o a custom script... Thank you! Alex

Hello, I'm attempting to use pure CSS to achieve a behavior where content inside one block (#block-49e9f758ded715aef454) is revealed when another adjacent block (#block-5ab6c6262d56980c7e89) is "clicked". I've explored several methods, but I'm still facing issues. Here's what I've tried so far: Hover with Adjacent Sibling Selector: I initially tried using the :hover pseudo-class in combination with the adjacent sibling selector (+). However, I wanted an effect that behaves more like a "click" rather than a hover. Active with Adjacent Sibling Selector: I also experimented with the :active pseudo-class. This didn't work for the desired effect. Animations: I attempted to use keyframes and animations to simulate a click-like behavior on hover. The idea was to make it feel like a press-and-hold action, but this didn't reveal the content in the second block as intended. Focus Pseudo-Class: My most recent attempt used the :focus pseudo-class, which seemed promising since it can mimic a click behavior. The relevant CSS for this method is: /* Initially, hide the text in the second block */ #block-49e9f758ded715aef454 { visibility: hidden; opacity: 0; transition: opacity 0.3s; } /* Allow the first block to be focusable */ #block-5ab6c6262d56980c7e89 { outline: none; /* Removes the default focus outline */ cursor: pointer; /* Indicates clickable element */ } /* Show the text in the second block when the first block is focused */ #block-5ab6c6262d56980c7e89:focus + #block-49e9f758ded715aef454 { visibility: visible; opacity: 1; } However, even with this method, when I "click" on #block-5ab6c6262d56980c7e89, the content inside #block-49e9f758ded715aef454 isn't being revealed. If anyone has suggestions, alternative solutions, or insights on what I might be overlooking, I'd greatly appreciate the help! Thank you! Alex