Currently I like the size and shape of the blue area on all devices. What I want is for the animation/video to line up with the bottom of the blue area, and stretch as wide as possible while maintaining aspect ratio.
The blue area’s height at the moment is hardcoded at 300 pixels, but i’m aware that this will need to be flexible to prevent the animation from covering up the paragraph.
I’ve been stuck on this little thing for too many hours…the video keeps overflowing the blue area, or not taking up all the available width, or causes the entire endcard to spill over to a different section. Admittedly I don’t have much experience with this, but no other component on the site has taken me this long to get right.
@Fnalsk what I would do instead of using the columns element (which isn’t the most flexible option) is create a container and set its display to grid, then create your div block with rounded corners, then place your content inside the div block. Then when you scale you can just edit the columns and rows accordingly.
@chris_loggins thank you, the cards look much cleaner now. however the container isnt resizing itself when the device changes - how do i get it to do that?
To be specific, id like the container to have a 10% margin on the left and right, and the endcards to take up all the remaining space, while maintaining the aspect ratio of the animations. as of now it doesnt look like the container size changes at all. tried to put the container in a div but that appears to do nothing
@Fnalsk You can edit the number of columns and rows on the lower breakpoints. Then you can select the endcard container, hold shift, then drag the cards into new rows as necessary.
I showed a demonstration in this video: Webflow - Lensii (sorry there is no audio, I had guest sleeping over)
Alternatively, you can move the container 2 out the div block 5 and give it a max with of 80% (that leaves about 10% margin on either side of the container), then set a display of flex to it. Then apply a width of 33.33% to the end cards. After that, apply a margin of 10px to both sides of the endcards. On the tablet breakpoint, set a padding of 40px to both sides the section called endcards div. Then on the mobile landscape, set the container 2 to children wrap and apply a margin-bottom to the cards. Now on the mobile portrait breakpoint, you will have to change the min-width you set to 100%.
Please note: You should adjust the container’s max-width as needed for each breakpoint.
