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]
Related
I have created an angular app where the sidebar is height: 100%. However when viewing the webapp in Chrome for Android, when scrolling the document:
The chrome address bar slides up gently
The 100% real size remains the same until you TouchEnd
The darkgrey sidebar is height: calc(100% - 55px) so the top bar should normally always remain visible, and always fill the remaining space between the top bar and the very bottom.
I've already tried several things to get this fixed. The footer has bottom: 0 and this one is in fact always rendered correctly. So this made me try to use top: 55px; bottom: 0 instead of height: calc(100% - 55px). But from the moment you're setting both top and bottom, the result is the same as setting the height.
Does anybody know a way to make the viewport adjust its height while the address bar is appearing/disappearing?
I was able to solve this issue by
Creating a css variable (variables.scss)
:root {
--viewport-height: 100%;
}
Instead of using 100% use var(--viewport-height)
height: calc(100% - 55px);
becomes
height: calc(var(--viewport-height) - 55px);
Then binding to the visualViewport.resize event (MUST use addEventListener here)
if (!serverSide) {
visualViewport.addEventListener('resize', () => {
document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);
});
}
Make sure there is no transition set for the height property.
CSS variables are supported by all major browsers.
VisualViewport docs
Linked-from-docs Demo with source code
Commit reference
I want to position “No results found” text in a div residing in body tag that has:
{
height:100%;
}
The div has:
margin-top: calc(50vh - 100px);
It looks ok except on iPhone Safari and Chrome (and I suspect Android) portrait mode. In that case a navigation toolbar appears at the bottom, pushing everything else up.
So in that case I want to use:
margin-top: calc(50vh - 140px);
assuming the bottom browser menu bar is 40px. That way hopefully the text would look more vertically centered.
What’s the best way to detect if those bottom menu bars are showing?
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.
I'm using the twentythirteen theme for this document.
It sets a width smaller than the full width and uses margin:0 auto to center the content divs.
In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.
Also, Chrome on Android shows the same white margins.
Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.
If you can link to a web page where this works, I could make the web view load that and check.
A background-color is set on several classes.
.entry-header, .entry-content, .entry-summary, .entry-meta {
background-color: #ffffff;
margin: 0 auto;
max-width: 604px;
width: 100%;
}
Delete the background-color and the issue will be fixed.
I'm currently developing an responsive website.
I have a very strange problem in Google chrome and on the default android internet browser.
It appears after the website is resized (Making the browser horizontally bigger or change portrait to landscape view on android (over 480 pixels)).
When I resize the browser back to less then 480 pixels a horizontal scrollbar appears.
See for yourself at (loco para saxo .com / new)
The problem is with your css. for navigation You write visibility: hidden; instead of display:none .
.moduletable_shop h3, #navigatie-horizontaal, .logo {
position: absolute;
width: 0;
height: 0;
display: none;
}
Reason to write display:none; because visibility: hidden; hide the element but not remove the element but display:none remove the element.
Dirty way, but it works.
body {
overflow-x: hidden;
}
As sandeep has written, it happens because you use visibility: hidden. If you want to hide stuff, you should use display:none instead. According to w3schools-docs, visibility: hidden is:
The element is invisible (but still takes up space)