Centered Floating Element

Need help
1

Hello,

I’m working on a mobile only (at first) website/app.

I selected a 380px wide content area to be located at the center of the screen and a 100% max width. So when you see the page in a wider screen it keeps well formatted at the center.

I’ve included a floating element to work as a header as long as I want it to be present (stuck at the top of the page) all time when users scroll down/up. So far it works just fine.

Problem: When opening the website/app in a desktop, tablet or wider screen in a mobile device, the floating element gets stucked to the top-left side of the screen.

Help wanted: Is there a way to make the floating element to appear at the center of the screen in top of the rest of the content?

For extra kudos: Same goes with the slider menu: When clicked, it unfolds from the left edge of the screen over the white space. (I can live with this one).

Thank you!

-d.

2

Have you got some screenshots or a link for us? Is your floating group set to a max width? This will make it stick to the left of the screen. The slider menu will open in the extreme left or right of your screen.

What I would have done, if it’s mobile only. Make the preset page width to centered and design the page with tablet width in mind. Then work it from there.

Hope this helps

2 Likes