Query images from HappyFiles

General
21

This is due to a combination of factors.

  1. You have set 100% width and height on the slider
  2. Even though we can’t see the blocks inside of your query template I am going to guess these are also set to dynamic height or width
  3. Sliders by default have certain layouts associated with them and there are settings to control this. The slider block has an “Adaptive Height” setting and the dynamic slider has auto height, etc

I don’t have time now to demo but you can make some small adjustments to make everything display. :+1:

1 Like
22

Hey @jornes.

The div’s do not disappear, they just get transformed into slider items:

image

@StrangeTech gave some good advice to check out.
There are indeed some issues when working with the dynamic slider, in this case though, my bet would be it’s about some incorrect or missing styling.
I also wouldn’t exclude some global class interference, as the HTML structure changes when toggling the slider.

If you have a link, feel free to share it, so some of us can have a closer look.

23

Thank you for your reply, guys!

Yes! I set width and height to 100% on the slider (query block). Because I want it to fully fit the container that has 100% max-width(and width) and height is 100vh.

Unfortunately, I think I can only make the slider block to fit the width and height, but unable to make the slider image to do so.

I am still figuring it out how to make the images fit. I set my image to position:absolute, top, bottom, left, and right: 10. Then it’s object-fit:cover.

I think I will need to do something to the div which is not able to set from the design panel.

image
image1919×915 100 KB

You should be able to see that the slider is now full width and height. Only the image is not.

I think the logic here in Cwicly is slightly different from Bricks. Because I can access all the div from the structure panel. Need more time for this.

The slider setting here, it works when I set to 100vh. It didn’t work with percentage.

image
image1919×919 118 KB

Maybe there is something I am still unclear.

24

It’s because you set some instances to position absolute.
Keep in mind that percentage is a relative unit that always looks for the dimension of the parent, not the viewport.

There is some Relative Styling required where you need to set some elements to 100% height to make it work.
When your solution works and you are fine with it, that’s good.
If you want to follow best practice, I suggest you to go the Relative Styling route or apply some quick custom CSS.

If you want, I can tell you the required selectors to do that.

25

Thank you so much @Marius

I will dig deeper tomorrow.
I think I can do it in a proper way. Just need some time to figure it out.

26

Hey @jornes.

Add this to your Query block’s custom CSS (or implement it via Relative Styling):

.blockclass, /** Query Block **/
.blockclass > *, /** Query Template Block **/
.blockclass .splide, /** Slider Wrapper **/
.blockclass .splide__track /** Slide List Wrapper **/ {
    height: 100%;
}

Make sure you apply to your Hero (root block) a height of 100dvh.
And also, in case you don’t have styling applied to your query block, toggle the class manually, so you custom CSS or Relative Styles work:

image

Now this should work with

image

as your images determine the size auf your slides, which you set to:

Let me know your progress if you want :slightly_smiling_face:

1 Like
27

Hi @Marius
Thanks so much for your solutions and being helpful (whoever helped)!
I will check it out when I have some time today. :blush:

1 Like
28

I already got it working correctly. Thank you @Marius !

29

Glad you made it work @jornes.
Consider to mark @dazziebunz’s post as the solution, so other users can benefit from it as well and find the correct approach quickly.

1 Like