Jump to content

HaleyWard

Circle Member
  • Posts

    12
  • Joined

  • Last visited

Everything posted by HaleyWard

  1. @tuanphan Oh I forgot to add the link! Sorry, here you go: https://www.corkandcandles.com/reserve-small-group
  2. Thank you, tuanphan! This is the code that worked for me: section[data-section-id="63640eedfa630e7109f0410e"]::after { content: ''; background-image: url(https://static1.squarespace.com/static/63640ed0871b36563fa4c917/t/63684929504397688b46a951/1667778857478/triangle.png); position: absolute; width: 150%; height: 150%; bottom: 0; top: -15vh; z-index: 1; left: -8vw; background-size: contain; background-repeat: no-repeat; background-position: left; }
  3. I'm trying to get Acuity's reservation system to change the "Seats in party" quantity from 1 to 0 so people get an error saying they have to choose their number of guests before moving on. When I look at the source code, I see: <input type="number" class="form-control inline-field group-quantity-input" min="1" data-testid="appointment-34956919-quantity-input" value="1" size="1" data-original-text="1"> When I change all of the 1s to 0, the scheduling block uses 0 as the new value, which is what I want. However, I can't seem to figure out how to use this code in Squarespace. It doesn't work in the CSS panel, so I was hoping someone with more coding knowledge could assist.
  4. If I code the triangle to be positioned in the upper left corner it's still cut off. What do you suggest?
  5. I can't seem to figure out how to add either a triangle background image or pseudo element that overlaps from one section to the next. I've attached an image of my homepage site design in Adobe XD, but I can't execute it on SS. The best I could do is manipulate the background image's overlay to form a triangle but it doesn't overlap with the next section. I attached the triangle I was trying to use to create the effect. Background overlay: section[data-section-id="63640eedfa630e7109f0410e"] { .section-background-overlay { background:linear-gradient(-45deg, transparent 50%, #fff 50%); z-index:1; opacity:.9!important; } } Here, I was able to get the triangle to show up as a background image and overlap with the next section, but it appears cut off and I'm not sure why. Background image: section[data-section-id="63640eedfa630e7109f0410e"]::after { content:''; background-image: url(https://static1.squarespace.com/static/63640ed0871b36563fa4c917/t/636431a8d4cb4d1fa7e3f8c5/1667510696435/triangle-2.png); position:absolute; width:100%; height:100%; z-index:1; } URL: https://chanceanddacompany.squarespace.com/ Password: construction
  6. I actually answered my own question. I moved the first </span> after "...Want to" down to the line before </h1> and it fixed the wrapping issue! <section class="sp-intro"> <h1 class="sp-headline slide"> <span>A Newsletter for Women Who Want to <span class="sp-words-wrapper"> <b class="is-visible">Contribute</b> <b>Create</b> <b>Connect</b> </span> <span>rather than consume</span> </span> </h1> </section>
  7. @tuanphan I have a related issue regarding this code that I'm hoping you can help with. I got the rotation to work ("Contribute" being one of the words that rotates in the attached screenshot), but the view on smaller screens looks awful. This is what I have pasted in the code block: <section class="sp-intro"> <h2 class="sp-headline slide"> <span>A Newsletter for Women Who Want to</span> <span class="sp-words-wrapper"> <b class="is-visible">Contribute</b> <b>Create</b> <b>Connect</b> </span> <span>rather than consume</span> </h2> </section> Is there a way to have the text wrap so it doesn't have a line break? Password to the site: inthehayl0ft URL: https://impala-megalodon-5wds.squarespace.com/ Link to code: https://codepen.io/kenwestphal/pen/xqRZYZ
  8. Hi there! Adding to this conversation because I'm also interested in how to code sticky sections like the one cited above. I'm using 7.1 and have a similar look on my about page that I split into 1/2 sections, but it doesn't force a scroll. Your mouse has to be over the neutral color area on the right side to scroll through the "what does selah mean?" section. Any ideas? @ecweb @tuanphan
  9. Hi bsull, I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions. Here's what worked for me: @media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.