Develop Reference

Mozilla Android AddressBar Conflict with Sticky Button on Bottom

I have searched a lot and havent found any solution that works so here it is.
I have created a button that is after the content and have applied css for it to become sticky at the bottom of the page...
<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>
button.ocs-toggle-posts-toc-mobile {
display: block;
bottom: 10px;
position: sticky;
position: -webkit-sticky;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 3px 0 #d5d5d5;
background: #232f3e;
font-weight: 500;
font-size: 18px;
padding: 7px 12px;
}
It works everywhere in any browser i tested except mozilla android.
If mozilla bottom adressbar is visible the button works okay.
https://imgur.com/a/EJosALR
BUT if mozilla’s bottom address bar is hidden, the button isnt clickable.
https://imgur.com/a/A2jwzIl
When the mozilla’s bottom address bar is hidden i think the viewport height changes, and maybe because the button is now where the visible adressbar was maybe it out of the "active" viewport of mozilla... that's definetely a bug i believe cause it doesnt happen in other browsers!
Nevertheless can you take a look and see if i have anything i have missed?
I would really appreciate it cause i have looked almost everywhere i believe...
test url: https://thefinterest.kinsta.cloud/p/asjalska/

Investigations using Firefox remote debugging
TL;DR: With high probability a bug in the Firefox mobile app
So I've linked up my phone to the computer and started a remote debugging session on the page you provided.
When inspecting the button element <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> we can see the exact box position highlighted in the viewport: screenshot
And now it gets interesting. Apparently, the DOM box of the element gets shifted as soon as the bottom bar disappears. Or rather: The initial viewport (when the bottom bar is visible) doesn't change, because the box is still located at the same position.
So you can in fact still click/touch the button but in an area above it.
You can see this behavior in the screen recording below:
Cookie banner is repositioned as expected
Interestingly, the behavior of the cookie banner (hidden in the screen recording because already confirmed) looks as expected though. So what's the difference to the button?
Workaround and working solution: move the button above the #ocs-site element
Apparently, after quite a lot of experiments, I realized the only difference between the button (incorrect behavior) and cookie banner (correct behavior) is the fact, that the cookie banner is in a rather top level of the DOM, whereas the button is nested quite deep in the tree.
Finally, I could find a working solution that makes the button behave as expected. Here you can see the correct scrolling behavior:
The solution I've come up with is to move the .ocs-trigger button above the #ocs-site div element. This fixes the incorrect scrolling behavior when the bottom bar disappears/appears.
Also, apply some styles on the .ocs-trigger element for the correct positioning.
position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;
Here you see the final DOM in a screenshot:
Please note, that you probably have to apply additional styling changes. This solution's major aspect was to get rid of the incorrect scrolling behavior.
Follow-up: Firefox Bug? Seems to me.
As it still appears to me at this moment, I would say this is a bug in the mobile Firefox implementation. My guess is, that the viewport calculations are somehow incorrect for nested elements.
In order to get some attention on this topic, I would recommend you to share these investigations and documentation with the Mozilla team at https://github.com/mozilla-mobile/fenix/issues. Let me know if I can help you with this.

Mobile FireFox has problem with fixed content at the bottom of the page

When I open an example of fixed content at the bottom of the page like this one, the content sticks at the bottom of the page in my desktop perfectly:
However, when I open this link in the FireFox in my mobile, as soon as my scroll reaches the end of the page, or if I tap the page, it will show an empty space after the fixed content, like this picture:
The css for fixed content is quite simple:
.w3-bottom {
bottom: 0
}
This works in FireFox desktop.
The question is what do I have to add to this class to work completely in mobile version of FireFox also.
I have made this sandbox, check the link to see how does the footer jump up and down in Mobile FireFox and not in Chrome.
I have to add this point that the scrollbar is disabled in my html and body tags:
<style>
/* Remove default margin */
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
</style>

Resizing page and nav bar

My nav bar works as i want it to on normal sized pages/screens. How ever on phones or smaller screens it cuts off the black background of the nav bar and keeps the list contents. making them invisible, and a horizontal scroll bar appearing for what looks like nothing.
Preview of error:
My code in html is just a list, in css basic styling and position is
margin: 0;
width: 1920px;
Ive tried setting it to 100%,but it just forces the nav bar text over the image, without extending the black bar. I just used 100% max width for the picture and it works fine.
All the tutorials i can find use boot strap, im not using boost strap as this is a practice school assignment and bootstrap isnt allowed in the final

nav{
position: absolute;
top:0;
width: 100%;
}
#serv{
width:100%;
margin-top: THE HEIGHT OF NAV;
}
Push this to nav and #serv.

i think u haven't used navbar class in your navbar and refer my plunker and it is mobile responsive.
refer this Plunker.
use ul<>tag and li<>tag
[https://plnkr.co/edit/5gvJYTgRcp6WzrN9cIOd?p=preview][1]

Chrome on Android 100% height and width more than viewport?

I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?

On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.

How to make inline-block in Chrome for Android work properly?

I'm trying to set up a page that looks good in Chrome for Android as well as in desktop Chrome.
I've got it working well in desktop Chrome, as per this screen shot:
.
The two "Answer Choice" lines, including the red "X" buttons, are in a div (called answers). The green "+" button is in the layout after the answers div. I've applied display: inline-block to the answers div, and as you can see, it's working as expected.
However, when I try to do this in Chrome for Android, the inline-block style doesn't seem to be working properly:
I can confirm that the style is being applied (I can use the remote inspector). If I remove the style, the green "+" button moves up a few pixels, showing that it is doing something, just not what I want.
How can I force Chrome on Android to respect the inline-block style?
EDIT: Here's the CSS applicable to the div containing all the answer choices:
.answers {
display: inline-block;
margin-bottom: 5px
}

I had the same issue, and found the solution on another question about div's and inline-block style. It's because of the way white-space collapses in html. You need to change your html so that the first button's close tag has no space between the second button's open tag.
<button class="button1">1
</button><button class="button2">2
</button>
See inline-block elements are line breaking for seemingly no reason?

I've experienced inline-block behaving inconsistently on Android as well. While I haven't been able to track down exactly what's going on, in many cases you can get away with using display: inline, which renders consistently.
Of course, you cannot use margin on inline elements. To address the vertical positioning, you can use vertical-align: middle.

Try to add "!important" to the "display: inline-block;"-attribute. Then it should look like this:
display: inline-block !important;