"one picture" site, setting height

Design help General
1

Hi, could you help me please. I´ve seen many tutorials but any of them isnt just one picture bg. I created simple website but i have some problems with setting height. For destkop version i set 100VW width and 100VH , but im confused setting these parameters for other platforms. I was trying 100%, 100VH, auto but none of these help. In preview mode it looks not so bad but on my tablet there is white strip bellow. By zooming my site on PC desktop i can see that white stripe or it mess up my blocks. Could you give me some quick advices how to set it if i am creating site with just one picture background ? Thanks for any advices.

Here is my site : https://preview.webflow.com/preview/stavkyaprijem?preview=917d93f4d769db24cef97fb7bfcbbb2e

2

Hi @laftek

I would suggest give to section “pozadie” position: fixed and aligning: full. Height you can make 100% and width you don’t need to set.

237×879 28 KB

Then in this section background settings you can make image size:cover for desktop

and image size: height=100% for tablet and mobile

Hope it helps.

Cheers,
Anna

3

Hi , thanks a lot for your help. Many things make sense to me now.

Could you tell me what way of setting picture´s position is right ?

1678×879 429 KB

or this way

1680×879 455 KB

And just just more thing. I publish my site it looks okay on my tablet but i dont know why it looks that bad in webflow

1677×879 342 KB

I would really appreciate your help.

4

Hi @laftek

I would not recommend to use big negative margins. Often it cause mess on whole site on mobile devices.

In designer mode in Webflow we have width breakpoints for see how design will look on different devices. but unfortunately, we do not have height breakpoints for that devices. That is why visually you can’t say if your content cover whole height of tablet screen or not. If you know tablet height and gave the image this size it will look fine on tablet screen, but it may not look good in designer mode in Webflow, because of desktop screen height.

5

I would not recommend to use big negative margins. Often it cause mess on whole site on mobile devices.

Thank you its good to know ! Im still little bit confused about what way i should set position. By setting some position (absolute, relative, fixed) or just by setting paddings/margins(postition: auto) ? Which is better ?

In designer mode in Webflow we have width breakpoints for see how design will look on different devices. but unfortunately, we do not have height breakpoints for that devices. That is why visually you can’t say if your content cover whole height of tablet screen or not. If you know tablet height and gave the image this size it will look fine on tablet screen, but it may not look good in designer mode in Webflow, because of desktop screen height.

Oh, its little complicated :smiley: but i hope i get it know

thank you so much !

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.