YumoBennyYang

1 minute ago, Ziggy said:

Can you share your website URL and this page?

yumobennyyang.com
Thanks!

The home page of my website currently has a video as background. What I did was uploading a video asa a block then applying the following css: 

#block-yui_3_17_2_1_1689789220776_5025{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:0;
}

I want to change the object-fit from "contain" to "cover" so that the video always fills the whole screen, but adding the object-fit line into the chunk above did not solve the problem. Is there another class I need to target? Thank you!

On 9/28/2023 at 5:50 PM, KwameAndCo said:

In that section, create a markdown or code block and put this in it.

<script>
  const linkDestination = "mylink";
  let parentElement = document.currentScript.parentElement;
  while (parentElement.tagName.toLowerCase() !== 'section') parentElement = parentElement.parentElement;
  parentElement.id = linkDestination;
  document.querySelectorAll('.header-title-logo a, .header-mobile-logo a').forEach(link => link.href = '/#' + linkDestination);
</script>

Change "mylink" to whatever you want to use as the anchor for the section.

It will then replace the logo link with a link to this section on the homepage.

IF you wanted to do it on another page you'd have to tweak it but this should solve your issue.

This solves the problem. Thank you! What should I do to have logos on all pages bring me to that section? Right now it only works on the home page. 

I would like the site logo to bring me to section[data-section-id="64b824b099645b68f03b937a"] on the homepage, instead of the top. Is that possible to do with code injection? Thanks!

On 7/26/2023 at 10:56 AM, tuanphan said:

You can replicate cv link by adding this to Settings > Developer Tools > Code Injection > Footer

<div class="sqs-block html-block sqs-block-html" id="kl-cv"><div class="sqs-block-content">
<div class="sqs-html-content">
  <p style="text-align:right;white-space:pre-wrap;" class=""><a href="https://read.cv/yumobennyyang" target="_blank"><span class="sqsrte-text-color--accent">↗cv</span></a></p>
</div>
</div></div>
<style>
  div#kl-cv {
    position: fixed;
    top: 1vw;
    right: 2vw;
    z-index: 99999;
    padding: 0 !important;
}
</style>

 

That seems to be the best solution. Thanks again!

2 hours ago, tuanphan said:

Do you use Personal or Business Plan?

business

On 7/23/2023 at 10:41 AM, tuanphan said:

Because you used code to sticky whole header, not logo only. Header overlap CV so you can't click it

The blue part is the part where you are using the code to make it sticky

Can you disable temporarily cursor custom animation effect? We can check your problem to find code to fix easier?

I just disabled the cursor animation. The thing is if the header doesnt stick to the top it will remain in the middle and make my content in the middle of my page unclickable right? Thanks for looking at my code!

This is a new home page i am working on: yumobennyyang.com/new-home.

The cv link on the top right corner is clickable in the beginning, but as soon as the header (logo) sticks to the top, it becomes unclickable, i'm guessing because now it is covered by the transparent header. But i've tried playing with the z index of .header, .section,  etc. Nothing fixed it.  The link is also completely unclickable on mobile. Would be great if I could get some advice. Thanks!

I'm trying to create an interaction with block IDs where a base image is split into 4 sections, and depending on which section you hover over, four different images replace the base image. 

So I have 9 blocks in total. 1 base image block, 4 alt image blocks all overlapped together with the base image block, and 4 small transparent image blocks placed on top of other images for hovering.

I have right now this code:

#block-base{ opacity: 1 }

#block-image1, #block-image2,  #block-image3, #block-image4{ opacity: 0 }

#block-section1:hover + #block-image1{ opacity: 1 }

#block-section2:hover + #block-image2{ opacity: 1 }

#block-section3:hover + #block-image3{ opacity: 1 }

#block-section4:hover + #block-image4{ opacity: 1 }

The blocks are all opacity 0 but none show up when I hover over the four sections. I also tried "~", " ", and ">" instead of "+", but none work. Can someone help me with this please? Thank you so much.