Uggel

1 minute ago, megancecile91 said:

Hey, I'm also having this issue. Where did you add this code to the site?

 

Thanks so much

Under the 'Advanced' tab for the page in question. And you need to find out the section-ID and replace it of course.

On 1/18/2024 at 9:50 AM, tuanphan said:

Can you remove above code? I will test it again

Did you look into this any more @tuanphan?

Yep, the code is gone now.

Thanks! How do I separate the effect? Right now the hover effect is activated on both shapes at the same time:

https://www.getvibes.se/test

The right shape has the hover effect you can see below (size & shadow):

Thanks Tuanphan. That makes the whole shape clickable, but the hover-effect stops working. I added the text link to the left shape on my test page:

https://www.getvibes.se/test

... you can see the the hover effect on the right shape.

Can I keep the effect in some way?

Yes please!

On 12/9/2023 at 10:25 PM, C4io said:

Hey, glad I found your post. I want to do the same thing but haven't found a solution yet. Have you figured this out on your own? If so, I'd appreciate if you could share the solution with me. Thanks in advance!

Almost solved it, but not exactly how I wanted it. But this code shows a part of the previous image at least (unfortunately with some margin to the edge) :

<style>
  @media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="651a78b59edb3971cf6f1a53"] ul {
    grid-template-columns: repeat(1,1fr) !Important; margin-left:10% !important;
}
  }
</style>

Mhm, yep not so pleasant UX 😆

Anyone else with ideas on how to make a swipeable block of linked items (without buttons)?

Ok I see, thanks. Any possibility to keep both swipe & button press?

I wan't a section of items to be linked without showing the buttons beneath. For that I use a script to hide the buttons and place the link directly on the item instead:

/* Remove buttons and make images clickable instead TEST */
[data-section-id="6541f9df4bbcfc6d6e699dca"] li.list-item {
    position: relative;
}
[data-section-id="6541f9df4bbcfc6d6e699dca"] .list-item-content__button-container {
    position: static;
}
[data-section-id="6541f9df4bbcfc6d6e699dca"] a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

It works fine, but the problem is that it disables the swipeability of the section for some reason.

If you look at https://www.getvibes.se/test you can see that the top row of items (with the script added to it) is not swipeable anymore. The bottom row without the script is swipeable.

Anyone got a clue?

@tuanphan Any ideas on this? The hover effect only triggers where there's no button or text, I want the hover effect on the WHOLE shape.

A follow-up-question on the same topic: I have added a hover effect to the shapes - how can I make that effect also cover the whole shape?

https://www.getvibes.se/test

This is the hover code I use:

#block-815c2e776f6eb10d1f3a {
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
} 

#block-815c2e776f6eb10d1f3a:hover {
  scale: 1.05;
      -webkit-box-shadow: 10px 10px 10px #ffc8c8;
  box-shadow: 10px 10px 10px #ffc8c8;
    border-radius:10px;
}

#block-acc86b27d7046e04e6de {
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
} 

#block-acc86b27d7046e04e6de:hover {
  scale: 1.05;
      -webkit-box-shadow: 10px 10px 10px #ffc8c8;
  box-shadow: 10px 10px 10px #ffc8c8;
    border-radius:10px;
}

That works! I added the IDs for the button areas too + all the IDs in the string that shows the pointer cursor. Huge thanks!

<script>
  $(document).ready(function() { 
		$(".fe-block-815c2e776f6eb10d1f3a, .fe-block-99c3b9f51964ebc7edd4, .fe-block-85940c20acac2684d5a7").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48349&_gl=1*gxqtaz*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
    $(".fe-block-acc86b27d7046e04e6de, .fe-block-508666a6347e16f66f9d, .fe-block-e1edb2a253e5fc7ac95a").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48350&_gl=1*1w4841b*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
});
</script>
<style>
  .fe-block-815c2e776f6eb10d1f3a, .fe-block-acc86b27d7046e04e6de, .fe-block-508666a6347e16f66f9d, .fe-block-e1edb2a253e5fc7ac95a, .fe-block-99c3b9f51964ebc7edd4, .fe-block-85940c20acac2684d5a7 {
  cursor: pointer;
  }
</style>

Thanks. It makes the top and bottom of the boxes clickable, but not the rest. I guess it's the text- and button-areas messing it up in some way?

https://www.getvibes.se/test

Exactly, the whole box including the text and button.

https://www.getvibes.se/test

These are the two shapes I want to link. Appreciate your help!

Yes I am!

I have a rectangular shape block with some text and a button, and I want to add a link to the whole block not just the button. Is it possible to add a link to a shape block?

No one?

Hi!

How can I show a part of the previous and next image in my image carousel on mobile? See my attached image. The standard layout doesn't encourage swiping at all..

Hi!

Don't know how to formulate this but I have an example of what I want to achieve to make it more understandable:

https://aoki.se/case/myrorna

Is it possible to create a page layout like this, with two columns with mixed images & videos that resize together with the image container? I e I want the image ratio to be locked when resizing the browser window. Much like the Gallery section works, but you can't use videos in that (or..?).

Thankful for any tips!

On 4/6/2022 at 10:49 AM, tuanphan said:

You can change 250px 250px to 0px 0px

Yep, that makes the cards wider again though, but with some extra css I managed to add padding to the left and right. Thanks.

On 8/8/2021 at 5:18 AM, tuanphan said:

Hi. Try this CSS

/* FAQ list */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="61043cb2ea8bce386c9bfd35"] {
    grid-gap: 250px 250px !important;
}
}

 

I have the same request. This CSS makes a big gap between the cards which doesn't look too good... Is there some way to have smaller cards (width) without the gap? I would like the same look as if it were three cards: same width, same margins etc.

Thanks! Works perfect.