▼
Streaming live at 10am (PST)

Fullscreen & fixed Position

Design help General
#1

Hello,

i´m looking since days a solution for my problem.

I want to create a one Page which is not scrollable, its always a fixed full screen menu.

First i tried % and it worked very well, i thought its perfect and done, but if i open the side on another PC or on another resolution (i changed in windows option) it looks completly different. The pictures are partially outside of the Screen :(. Now i also tried “VH” but its still the same, it works on 16:9 but on 4:3 it doesnt work…

Is there another way to fix positions in the Broswer? So that the Icons are on every screen on the same position?

Here is the Link to my page: https://preview.webflow.com/preview/hernals?preview=d5fab3abd451f31b55206ac017efea89

on my 23inch screen with 1920x1080 it works very well, every section went on the correct place

but on my 27 inch 2560x1440 screen it looks completly different :frowning:

I would be very happy if you have tipps for me, i need to complete the website for the university :slight_smile:

Thank you very much!! :slight_smile:

Greetings Felix

#2

No way (BG yes not content). You want the same graphic to fill up the screen. If you really don’t want a scroll add design tweaks (Change size and so on). Or by overflow

Use Flex (Always center-center) your graphics.

Your layout is very wierd (Use bg image for the background image not image element inside div). You add image that’s’ pull down all content (see image):
image

Or by regular padding-margin (No need for endless tricks for this layout).

If you want to create overlay this is the trick:
https://www.w3schools.com/howto/howto_css_image_text.asp

Anyway use BG image its better/easy to fill-up the screen with.

Follow this tutorial:


And this:

Also her you find a lot of free templates with full width header (Try and learn the styles):

Concept problem

Also: If you set fullscreen element to be fixed - you get “full screen div that’s always hide the content Below”) + Remember to wrap with div the elements you want to be fixed

Fixed menu tutorial:

#3

Hello Siton_Systems!

Thank you really much for your Reply! :slight_smile: I know the layout is wierd haha, but i tried my best!

I will read all your links and watch the Videos!

Thanks for taking you the time! :slight_smile:
Greetings Felix

#4

I have another Question, if you have time to answer! :slight_smile:
I did the same concept with flexboxes now - and i would add a “hover” effect again, if someone hover over a picture it change to a colorfull picture.

Is there a better/easier way to give 2 Images on same position?

greetings felix

#5

No build in feature (By the UI).

But - Try this (img)


BG:

Or by CSS filter code (Not well supported in old browsers):

http://jsfiddle.net/7mNEC/1/

Anyway if this not solve your problem add this issue as seperate Q in the forum

#6

Thank you very much again! I started the page from beginning and it looks much better :slight_smile:

If you are interested you can check here:
https://preview.webflow.com/preview/hernals-fb7aeb?preview=aa176436a927ee6b6accc28f7812a798

Its not finished, but it works now on all screen resolution! :slight_smile:

You are my hero! Thank you!

1 Like
#7

hh no need to exaggerate :slight_smile: follow webflow University + watch webflow workshops - to get better design and learn CSS-HTML better.

Yes now its looks better.

If this solve your problem for now - mark as solve to close this topic. Thanks!

#8

Yeah i will try :slight_smile: Thanks!

I would have a last question before i close the topic:

is it possible to block the “scrolling function” on the site?

Cause if someone scroll on the site, the interactions stop working well

Greetings :slight_smile:

#9

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