Streaming live at 10am (PST)

[RESOLVED] Child Element not showing correct % height of parent? (Mobile View)


#1

Greetings,

I’m at a loss and frustrated…I know this is something really, REALLY, simple and basic, but for the life of me, I can’t see the wood through the forest!

I’ve viewed the tutorials many times, and I think I have a pretty good understanding about setting heights and widths, but do you think I can figure out what I’ve done?

Here’s the disclaimer= I like to play with different settings to see what they do, and many times I will break things so I can learn how to recreate them again (correctly) - not always successfully.

Anyway, here’s the link: https://preview.webflow.com/preview/nzsparklingwater?preview=dafea40f48bc56009da14357c703d901

Happy with Desktop view, but check out mobile view!!

Sorry for the rant (with a smile :slight_smile: )
It’s all good :wink:

Keiran


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

@knk Your problem is when you go to mobile your cards have no height just auto so you card element is collapsing


#3

Hey TJ, thanks for your reply.

What I don’t understand is that the settings for each element (Card) is the same in desktop view as mobile?
Yet the cards display differently.

I’ve set height as a %age (50%), while the parent is also set as a %age, the Hero Wrapper is set to 80vh.

I thought that the children of the element would take their reference from parent (Grandparent etc…)?
Although, I freely accept my understanding may be incorrect.

Keiran


#4

@knk in responsive design media queries are the root of responsive change in your work flow. when you think of 100vh and vh is view height. the vh of a mobile device is still smaller than the vh of a desktop… so when your on mobile and you have less real estate you need to tell the cards to push to a height so that the div will give you more real estate… see on desktop your columns are on the right with plenty of space below. but on mobile it stacks under so you need to open the canvas more.


#5

Hey my man, awesome.

I knew it was something obvious. Completely forgot the viewport size would be different.

I knew I couldn’t see the wood through the trees.

Appreciate your help.
Hope to repay or pay forward someday soon.

Ceers
Keiran


#6

@knk Glad I could help :-):smiley: