Setting element Height -different device sizes

Wappler General Need Help
1

I am able to set element height but it only sets for the selected device for example if i set it for mobile it does not set the same for other devices. Is this expected ? I can see @media in the styles.css which seems to be setting the height differently for different devices.

While designing elements say as a %, for example header should be 20% of total height , should we do this for every device or is there a way to do it for all devices? I’m a new user and I’m trying to understand how elements placing height etc work .

2

It all depends on what is your layout and where/how are you setting the height. Maybe explain more detailed what are you doing and what is your page layout.

3

I want the header to be 20% of the page
I set it here

image
image349×991 17.8 KB

4

Ok but what is your page layout? The height set in % is really tricky and it depends on what is the layout and where exactly is your element positioned.

5

Oh if it is tricky should i stick to setting height in px? It is at the very top of the page and takes up 100% of the width

6

You can use vh for height and vw for width:
e.g. 20vh (for 20% of the viewport height)

2 Likes
7

Thanks 20vh has the advantage that the element’s container’s height can be auto and it will still work whereas height % does not work if the element’s container’s height is auto ( ithink width works in both cases) so i will use vh

I have one more question , if i select height as 20vh it only does that for the current device size , if i want it to work on phone i have to set it for phone too . Is this expected behaviour? Should i set it for all devices or should i edit the styles.css and remove the @media…

@media (min-width: 1400px) {

.style1 {

    height: 20vh

}

}

8

vh is the viewport height so 20% of whatever the size of screen/window the page is being loaded into

9

I edited the styles.css from

@media (min-width: 1400px) {

    .style1 {

        height: 20vh

    }

}

to

    .style1 {

        height: 20vh

    }

and now it is 20vh on all devices

Thank you

1 Like
10

You could also add something like min-height:100px so that if the window was really small, the element will not shrink below 100px but will be 20% of vh the rest of the time

2 Likes
11

Thanks i will do that

1 Like