Uggel

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

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!

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