Slider revolution shape layer width 100% + height 50%

[ADBL]

Hi —

Within a slider revolution slide, I need two shape layers to be 100% wide and 50% in height (on top of each other) for all screen size.

If I set the layer to width: 100% and height: 50% I can see it on the canvas, but not in the preview or front end. It seems either of the two (width or height) needs to be in pixels; then I can see the layers, but they won’t stay both at 50% in height, they will overlap or I’ll get a gap).

Please advise. Thanks.

[ruenel]

Hello @ADBL,

Thanks for writing in!

To resolve your issue, please make sure that it is full height.

Hope this helps. Please let us know how it goes.

[ADBL]

Hi —

As mentioned, I need it full width (not height) and 50% in height. If I set it to Full width (or custom 100% in width) and 50% in height, I can’t see the layers in preview or front end.

Please advise. thanks.

[friech]

Hi @ADBL,

Part of the problem here is the Y offset of the slide can be set in px only which is not responsive.

I’ve added this to your Slider CSS instead.

.fiftyvh {
	min-height: 50vh !important;
	max-height: 50vh !important;
}
.top50vh {top: 50vh !important;}

The top50vh Class there is the responsive offset, I’ve applied it on the blue shape layer wrapper.

See the Slide #4 for reference.

Hope it helps,
Cheers!

[ADBL]

Hi guys — Thanks a lot.

On slide id 31, I can’t see the top layer. On slide id 24, I initially see both layers, but I noticed that the wrapper class attribute wasn’t set for the top layer. When I set it to top50vh it disappears.

Also, on slide id 31, the bottom layer opacity seems to be darker than 0.8 (how it’s set, same as slide 24).

Basically, how would I go about having the two (100% wide) layers taking each 50% of the view port in height at any size, opacity set to 0.8 each?

I tried using rows on slide id 32, to no avail.

Thanks again.

[thai]

Hi @ADBL,

It seems a bug of Slider Revolution plugin. To fix it, please add my_shape to Wrapper ID of your shape layer:

After that add this custom CSS:

#my_shape .tp-loop-wrap,
#my_shape .tp-loop-wrap .tp-mask-wrap,
#my_shape .tp-loop-wrap .tp-mask-wrap .tp-shape {
    height: 100% !important;
}

#my_shape .tp-loop-wrap .tp-mask-wrap .tp-shape {
    max-height: 100% !important;
}

Hope it helps

[ADBL]

Thanks a lot.

This replaces the previous css code, right?

Is it safe to add the same id to both shapes (I thought an id needed to be unique on a page)?

I must have something wrong because I still have a gap at the bottom on the front end. I tried with and without applying the id attribute to the bottom layer.

I tried with groups too on id 33 (which I think I’ll end up using), still no luck (I can’t see the groups on the front end), but I think that target classes are different for groups (than shapes), if you could provide the code/fix for these that’d be great.

I need two groups on top of each other, each 100% in width and 50% in height (if that matters: with background color and opacity settings, over a video background).

Care to have a look? Many thanks!

[christian]

Hey @ADBL,

Please remove the CSS provided if they don’t work.

I’ve set the top shape to 50% height and it works.

Your bottom shape, I’ve set to 50% height also but aligned it at the bottom.

Now there’s no more gap.

It works in desktop and mobile.

Hope that helps.

[ADBL]

Thanks a lot Christian. I almost feel like egg on my face given how simple the solution was…

It’s just that for some reason, it worked when I first checked, then I removed the css wrapper id and css code, and now I can’t see the shapes either in the preview or front end…

Sorry to be a drag, but if you could throw an eye (hoping it’s the last time)…

Thanks!

[christian]

Hey @ADBL,

In that case, please re-add the ID and CSS. The options I’ve set must have worked in tandem with the provided codes by my colleagues.

Thanks.

[ADBL]

Thanks guys. I does work with the css. Can you please confirm that the Wrapper ID attribute won’t get me multiple div’s with the same id on the page.

Thank you again.

[jade]

Hi there,

If you are referring to the my_shape that was previously suggested, it should be safe to use it since that ID seems to be specific. Also, feel free to change the wrapper ID value accordingly if you see any duplicate.

Hope this helps.