I have a weird problem. I set my top menu to width: 100%, but while loading, it goes out of screen (to always 522px).
Debug
I stopped page load with debugger; in console. Element's computed width is 522px. Clicking on that brings me to css width: 100%. Everything in the page stays within page width except the menu.
CSS
#mobile_header {
vertical-align: middle;
position: fixed;
background-color: #5d3026;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
z-index: 99998;
box-sizing: content-box;
}
Weird part
It goes out of bounds only while loading. Whenever page finishes loading, it goes to normal 100% of full screen size. No additional JS affect this. No CSS is loaded (after the page load pause). I've also deleted all the contents from within, changed ID in html and css (so really no scripts would affect it), cleared cache. Still goes to weird 522px (that is translated from 100%).
I know it's a wild shot, but does anyone has any guess of what could cause such a situation (on all browsers)?
For fixed elements you can use left: 0 and right: 0 for 100% width
#mobile_header {
vertical-align: middle;
position: fixed;
background-color: #5d3026;
top: 0;
left: 0;
right: 0; /* <= */
height: 50px;
z-index: 99998;
box-sizing: content-box;
}
At the end it turned out that my header (separate file from content) had another item with static length (50em) and visibility:hidden so as I looked in the page, i couldn't find anything.
Noticed the cause only after taking apart all the header file.
Long story short - if width: 100% is going out of screen and parents are normal size, there MUST be something static size in the content stretching it out. Thorough search will help.
You have meta viewport in your HTML for adjust the scale in mobile browsers?
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/
The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.
Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)
I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling).
I'm pretty sure it's due to a CSS declaration, but I don't know which.
To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.
From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/
I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.
HTML
<body class="home blog">
<div id="main">
<div id="scenes">
...
</div>
<div id="slidewrapper">
<div id="rightsec" class="mainsec">
...
</div>
<div id="leftsec" class="mainsec">
...
</div>
</div>
</div>
</body>
CSS (Sass)
html {
box-sizing: border-box;
font-size: 125%;
text-size-adjust: 100%;
line-height: 1.4;
}
body {
background: #000;
}
#main {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#scenes {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
width: 100%;
margin: auto;
pointer-events: none;
}
#slidewrapper {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.mainsec {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#leftsec {
z-index: 1;
left: calc(60px - 100%);
}
#rightsec {
z-index: 2;
right: calc(60px - 100%);
}
Cheers!
Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.
I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!
Apologies if this is obvious, I'm no CSS expert.
When you drop an image directly onto a web browser on any browser, they all implement some sort of "shrink to fit" functionality. Example is this video which shows shrink to fit in action on Firefox:
http://youtu.be/1LW-eByYXik
I want to implement what is shown in the video in my application and have it work cross browser to the greatest extent practical.
Is there a way to do this? Various documents on the web cover some sort of discussion about shrink to fit but none seem to discuss how to implement this for an image across browsers in a consistent manner.
I've looked at the code on the browser when an image has been dropped on and they all seem to take a different approach.
#slaks I have tried your suggestion just then on Chrome and it did not work. Here's the code I tried:
<html>
<head>
</head>
<body>
<style>
img {
width: auto;
height: auto;
max-width: 100%
max-height: 100%
}
</style>
<img src="whn-data/image.png">
</body>
</html>
</head>
This code seems to work:
img {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height:100%;
max-width: 100%;
}
JSFiddle
Margin: auto is added to keep the image centered (both horizontal and vertical).
The max-height and max-width limit the image from going bigger than the screen.
BUT this technique has a disadvantage: the default size of your image has to be bigger than the height/width of the browser window or container it is in. If it is not margins will appear on all sides to keep the image's default dimensions.
You're looking for background-size: contain.
(assuming that the image is a background-image)
For an <img> tag, use
width: auto;
height: auto;
max-width: 100%
max-height: 100%
I think what browsers implement in those cases is the property zooom.
I FIGURED IT OUT. Sorry it took me a while. This is actually pretty obvious.
Use this:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
JSFIDDLE HERE
I'm creating a horizontal animated page transition system where the screen scales to accomodate the incoming page. The problem I have is when moving to a smaller page size, the previous (larger) page overflows out of my content wrapper and consequently causes my overall page to extend past the footer. This screen capture shows my problem.
You can see how the current page exits on the left, after the screen has shrunk to accomodate the incoming smaller page. (the yellow is the footer, the white the unwanted screen extension).
Currently my "page" css is
.myPage
{
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}
I've attempted fiddling with overflow-y:hidden which I thought might work but no such luck.
What can I do to keep my page class from extending out of my content and screwing up my page?
EDIT:
Here's the page wrapper.
.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}
Edit2: A jsfiddle thats broken but features all my code
overflow-y won't work without a fixed height. Try setting the height to 100% or some other value that looks right.
In this case you could also set bottom instead of height to give the element a fixed height.
I'm working on designing a full-page site, which will be powered mostly with javascript (ajax in particular). Right now, I'm working on the basic structure and such.
I've seen several questions with similar goals, but none of them really helped. Maybe I'm misinterpreting, or something. I dunno. Anyway, my goal is to create a page that takes up exactly the amount of space a user's browser provides, without empty space on the sides or top. This means I have to rely upon percent-based measurements for my structure.
Problem is, one of the two key elements is to be a specific size, in pixels. Any bigger, and there will be space left empty and put to waste. Any smaller, and my site's logo won't fit. Take a look at my code:
HTML
[nav]The Beef[/nav]
[footer]The Cream Filling[/footer]
CSS
html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}
nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}
footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}
The problem is, now the full-page navigation (as I mentioned, javascript-powered site) continues on "under" the footer. What I want it to do, is take up all of the space the footer isn't using, without extending the page beyond the capacity of the user's screen (IE, no scroll bars).
I'd rather not use javascript for this, but I'm willing to do so if there are absolutely no other options.
Why not specify the bottom position of the content block:
bottom: 170px;