Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name: Password:
Ambiera Forum > RocketCake
Styled button in fixed container disappears if smartphone is turned to horizontal
Author Text

micaelo
Registered User
Quote
2022-09-17 11:07:37

I have put a styled button with a telephone link into a fixed container so that a call option is on hand at whatever scroll position. This works well on pc and smartphone, however if I turn the smartphone into horizontal position the button disappears. All other content of the page adapts to the broader screen width, but the phone button is no longer visible. It comes back if I turn the smartphone back to vertical position.

It's this page https://weingutschickjugenheim.d...

Has anyone an idea how to fix that?


erik
Registered User
Quote
2022-09-17 11:53:06

Put another additional css style like this into the container:
top: 30vh;

That way it is always at the position of 30% of the view height. That should do the trick.


bupp
Registered User
Quote
2022-09-17 11:59:41

This works well on pc and smartphone


No, it doesn't. You can try it if you change the length and width of the browser window.

I think its not right placed, perhaps outside of this container?


micaelo
Registered User
Quote
2022-09-17 12:35:07

@ bupp

You're right. I have reduced the height of my pc browser window, and yes, the button disappears on pc too.

@ erik

I'll try your proposal with another additional CSS style.


micaelo
Guest
Quote
2022-09-17 13:44:15

I have played around with variations of the additional CSS style
top: 30vh;

but found that whatever distance from top I chose it always looks different on pc and mobile.

So I decided to simply put the fixed container at the very top of the page. This way it looks same on pc and mobile, and the button remains visible if someone should rotate his/her mobile to horizontal orientation.

Thanks anyway for the tip on CSS style. I will keep it on file for potential future use.


micaelo
Registered User
Quote
2022-09-17 19:11:33

I wrote:
"So I decided to simply put the fixed container at the very top of the page. This way it looks same on pc and mobile, and the button remains visible if someone should rotate his/her mobile to horizontal orientation."


Well, yes, looks good, but after further checking it's not my final solution. I found that the fixed container, if sitting on top or close to the top of page, can conflict with the mobile menu pane, i.e. it can happen that a mobile menu item is no longer clickable.

Here is my final solution: I have placed the fixed container at the bottom of the page and used the
top: 65vh;
additional CSS style to display the phone button at a position where it's still visible if the mobile is held in horizontal position.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "?nternational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© 2020 Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact