-
Posts
12 -
Joined
-
Last visited
Reputation Activity
-
HaleyWard got a reaction from tuanphan in How to add overlapping triangle background element
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; } -
HaleyWard got a reaction from tuanphan in Custom Animation: Rotating Text/Words on 7.1 FE
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>
-
HaleyWard got a reaction from RolandFuseHub in Adjust stacking on mobile (Text before image)
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!
-
HaleyWard got a reaction from sheriipop in Adjust stacking on mobile (Text before image)
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!
-
HaleyWard got a reaction from Beyondspace in Split Sticky Sections
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
-
HaleyWard reacted to dubwebdev in Adjust stacking on mobile (Text before image)
Thanks @HaleyWard - clutch answer on this one I spent the whole day working through my own and came very close to what you had but yours did the trick. Appreciate the help here!
-
HaleyWard got a reaction from dubwebdev in Adjust stacking on mobile (Text before image)
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!
-
HaleyWard got a reaction from johnbuedel in Adjust stacking on mobile (Text before image)
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!