I have a problem with scrollbar appearing at wrong pixel point on my website. I narrowed problem to simple codepen structure.
html,
body {
margin: 0;
padding: 0;
}
.cont {
margin: 0;
background: #333;
}
.cont__inner {
width: 1100px;
margin: 0 auto;
}
#media screen and (max-width: 1170px) {
.cont__inner {
width: 950px;
}
}
.cont__inner_main {
padding: 0 45px;
}
.why {
height: 115px;
}
<div class="cont">
<div class="cont__inner cont__inner_main ">
<div class="why">adssd</div>
</div>
</div>
The problem comes when i apply height 700px to div.why.
You can see that width of container is 1100px + 45px padding on both sides , so its 1190px total
I've set media screen breakpoint lower just to track when scrollbar appears.
You can test yourself, it comes up at 1206px and no element overlap document width at that moment. Removing heigth 700px solves problem, but what did it even influence width ?
Simply add width: auto in &_main
&_main
padding: 0 $mn * 3
width: auto
Related
I'm looking at a page in 1920*1080 resolution.
It's too much wide to spread all content from right to left, so I apply on body:
width: 77%;
background: #eee;
To get gray margins.
77%*1920 = 1478, so this means that I wouldn't want any margin once window size i below 1478px.
However, when window size is getting reduced towards 1478, I also want to reduce the margins.
For example: 1920-1478=442, half of it is 221, so when window size is 1478+221=1699 then margins should be about 88.5%, and not still in 77%.
So I need some calculation that will do this for any given size. It's a common practice isn't it? but how to do that?
body {
width: 77%;
background: #eee;
margin: 0 auto;
}
#media (max-width: 1700px) {
body {
width: 89%;
}
}
#media (max-width: 1498px) {
body {
width: 100%;
}
}
what you're actually trying to do is to give a max-width: 1498px to the container, so instead of applying the rule to the body use a container element (e.g. <main>) and give it a center alignment using margin: 0 auto
See the example with a large resolution
body {
padding: 0;
margin: 0;
background: #eee;
}
main {
max-width: 1498px;
background: #fff;
margin: 0 auto;
}
<main>
main element
</main>
I have been trying to determine the cause of the following issue on a web page.
With the code below, when any browser is resized and the page becomes horizontally scrollable, a white space appears on the right.
How can I remove this white space? Thanks for all help given!
body {
margin: 0;
padding: 0;
}
.wrap {
background-color: #2a2c67;
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>
the container "wrap" has no width set so, as a block element it will take 100% of the ACTUAL window size. when you horizontal scroll because the child has a fixed width bigger than his parent and the actual window, you will scroll the child, but the parent will remain with whatever window size it's atm and scrolling out of the window. It won't dinamically change his current width (as browsers understand) to fill the child width.
Imo you just have to change the background color to the children to fix it (not that it's broken).
Edited: Or as other people said... set the width to the wrap and not to the "main"
body {
margin: 0;
padding: 0;
}
.wrap {
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
background-color: #2a2c67;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>
I'm experiencing strange behavior in Firefox (v35 v39 v52) regarding percentage padding. I cannot reproduce this issue in Chrome.
I have an element with top padding set as a percentage, like this:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
Percentage padding on an element is relative to its parent's width. So, I expect that the padding at the top of the element will grow as the window's width is enlarged. This is indeed the result for my simple <p> tag.
However, when that element is floated or has width, the percentage padding does not behave as expected when the window is resized. The padding is calculated correctly upon load. But, as the window is resized, the total height of elements that are floated or have width seems to remain the same. Text in the element is inexplicably placed at the bottom of an area that gets mysterious height. This happens for elements like this:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
float:left;
}
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
width:150px;
}
Here is an image to illustrate what I'm seeing. Color coding is added by Firebug; purple is padding, yellow is margin, and blue is the content of the element.
What causes this inconsistency? Can anyone else reproduce this issue in Firefox (or any other browser)?
Here's a fiddle to demonstrate. In Firefox, try expanding or contracting the result pane to see the elements resize.
I have not added a runnable code snippet, as I couldn't find an easy way of resizing the snippet area on-the-fly.
I've added a stack snippet to demonstrate the issue. Use the "Full page" button so you can stretch the window's width.
html,body {
margin: 0;
}
div#container {
width: 100%;
}
p {
padding: 10% 0 0;
margin: 0 0 1em;
background-color: #CCC;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;
}
<div id="container">
<p>NORMAL</p>
<p class="floated">FLOATED</p>
<div style="clear:both;height:0;"></div>
<p class="width_limited">HAS WIDTH</p>
</div>
That's strange. I'm not sure if it is a bug. But, by changing the display to flex seems to solve the problem. http://jsfiddle.net/vsvp71rw/4/
p {
display: -webkit-flex;
display: -moz-flex;
display: flex;
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
you may use a pseudo element to avoid the bug and clear those height of 10%'s width you wish.
html,
body {
margin: 0;
}
div#container {
width: 100%;
}
p {
margin: 0 0 1em;
background-color: #CCC;
}
p:before {
content: '';
padding: 5% 0;
display: block;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;
<div id="container">
<p>NORMAL</p>
<p class="floated">FLOATED</p>
<div style="clear:both;height:0;"></div>
<p class="width_limited">HAS WIDTH</p>
</div>
On my main page, I have an image that moves around or wraps around on browser resize. I just want to change it so that the image gets cut from the right if the browser is small.
I have tried a few things to no avail:
Remove the float on the div id right and the relative positioning on right-image
Try min-width for div id right
Give height, widths in percentages
Added viewport settings.
In the template, the image is placed outside the main like:
<body>
<div id = "main">
<div id = "left">
<div id="left-title">Tag Line</div>
<div id="left-blurb">
Some blurb
</div>
<div id='left-signup'> SignUp! button</div>
</div>
<div id = "right">
<div id = "right-image"></div> <--- Image
</div>
</body>
Relevant css:
body {
margin: 0 auto;
height: auto;
overflow-x: hidden;
}
#main {
float: center;
width: 950px;
overflow: visible;
height: auto;
margin: 0 auto;
}
#left {
float: left;
width: 500px;
display: inline-block;
}
#left-title {
font-size: 3.4em;
margin: 25px 0px 20px 15px;
}
#left-blurb {
margin: 0px 20px 10px 15px;
}
#left-signup {
margin: 0px 0px 0px 90px;
}
#right {
float: right;
width: 600px;
height: 400px;
margin-top: -10px;
display: inline-block;
}
#right-image {
height: 100%;
width: 100%;
position: relative;
left: -50px;
top: 0px;
background: url(my_photo.jpg) no-repeat;
-moz-background-size: cover;
background-size: cover;
z-index: 0;
}
I think that is the css that is relevant to the question. But if it is not enough, the website I am talking about is https://www.mathnuggets.com
Will appreciate any insights.
You can add a media query to just remove it from the document when your document size is less than a certain number of pixels.
#media screen and (max-width:480px) {
#right-image{
display: none;
}
}
Otherwise, you can also adjust its positioning as you've done using the same method, just adjusting its position depending on window size. The issue I'm seeing in your code is that you're using a -10px margin that is causing it to overlap your other elements, so you could simply change that for certain viewport sizes.
In addition, you might want to consider changing your sizing method from being absolute using pixels and instead use percentages so that your image can flex a little as your viewport changes.
This site has a lot of great resources I think could help you to work with your existing design so that it can be more responsive as needed: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
If you use
position: absolute;
for ID=right div it will never go under left div
I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/