Streaming live at 10am (PST)

Slider within a Div


#1

Hi Everyone.

I am having a bit of trouble placing a slider inside a Div Block. I have two columns and I want the right hand side to be a slider featuring different projects.

When I practice with it on a test page I can’t get the slider height to match the left hand column or the section height. When I put a height of 100% if seems to make it smaller.

Any ideas?

Screen shots:
2 - Slider in place of the image (Height set to auto)
3 - Slider in place of the image (Height set to 100%)
3- How it looks at the moment

Thanks,
Steve


Here is my site Read-Only: https://preview.webflow.com/preview/wozzatestbed?preview=7293b152402f5476358d3a077f301d36


#2

Did you get this fixed? Honestly, I’ve never had success with auto-height. Off top of my head, add a parent Div for both sides, set it to Flex, then expand vertically. The images in the slider need to be large enough to fill the expand. Make them large and add Overflow: Hidden for that parent wrapper.

Let me know if you need help.


#3

Unfortunately, still not got it working. I feel like this should be a fairly easy thing to achieve but i’m just not getting it.


#4

Example - ROW:
col-1 with content "600px height X 300px Width" short img
col-2 with content "900px height X 300px Width " tall img

No way to match visually the height + Zero white space! without "photoshop crop"
effect (100% height wont solve this. See the Q at the bottom).

Some solution/ideas:

  • set the parent of tall to 600px and overflow hidden

  • set tall - as background image (cover & center-center) now the height is 600 (flexbox) - very common

  • or- stretch "short -or- make both short&tall “cropped”

Remember by default flexbox items match height - the best to learn this issue is to add big-red strokes and see the layout.

Read this (You find some examples):

100% height “not working” Q:

The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block. mdn