Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
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? |
||||
|
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. |
||||
|
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? |
||||
|
@ 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. |
||||
|
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. |
||||
|
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. |
||||
|
|
){kind=link}