I am using the Twitter Bootstrap framework for a responsive/fluid layout.
The top of the website spans across the full width of any screen but when I get down into the content, there is about a 20 px gap from the right side of the screen. This only seems to happen when the screen is small enough to pull in the part of the CSS that addresses:
#media (max-width: 767px){}
You can see a screen shot here:
http://monosnap.com/image/dQ4OD0O8fW7gcbVvXVfTKLbUa
And my test code is hosted here: http://demo.omnigon.com/christian_bovine/show-sxsw/
Like I said, on a large screen its fine, only on smaller screen, and its only the middle content. I have looked at the many times and I cannot see my problem?
You need to remove the negative margins on your #footer css selector. This declaration is essentially forcing your footer to be larger than its parent container.
Typically you would only use this technique when the parent container has padding and you want to negate the parents padding by applying a negative margin to the child element.
Related
I positioned these images as absolute with left/top as percentages.
But as I shrink the browser width the images start to overlap.I haven't set the position of the 3rd and 4th row yet, but as you can see they're overlapping each other.
I'm guessing that it's because of the set % distance of the images? How do I go about positioning the images so that they keep the same formation as the browser width decreases?
My container is set to Relative block, images as Absolute with % width and px height.
I got the idea from this design http://builtbybuffalo.com/ but I have no idea how they did it.
They way they did it is with media queries.
Basically they set a breakpoint when the content begins to look bad and added extra CSS to make the necessary adjustments.
You can see this in their css here. Search for this string in that file: #media screen and (max-width: 1180px) and check out the CSS underneath it (you should format the CSS, since it's minified, you can do that using Chrome Dev Tools or something like this).
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
I'm pretty new to css styling and I need help postioning DIVs in a layout. If a DIV tag is declared bottom of the page, when the browser width is reduced (to simulate as in a mobile phone), I require this DIV to be displayed on top. I know this could be achieved by assigning a minus value, but isn't there a better way of doing this?
Please have a look at the http://2010.dconstruct.org/speakers/tom-coates and notice that the content inside the right column is displayed before the main content when the browser width is reduced. I'm unable to find the solution through firebug.
Thanks.
They use media queries:
#media all and (max-device-width: 767px), all and (max-width: 449px){
// Code
}
If you want to know more about them, you can read, e.g., http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I assume you're using a CSS #media query to condition different CSS rules on the width of the page already.
What I would do is, put the div in question before the main content in the HTML document, and above your width threshold, have it float: right. Then, below your width threshold, do not have it floating right.
I am trying to understand which part of twitter bootstrap css code is responsible for the left padding whitespace in this example: http://twitter.github.com/bootstrap/examples/hero.html
but does not appear in this example: http://twitter.github.com/bootstrap/examples/starter-template.html
thanks in advance.
The first example is in a div with the class hero-unit. The hero-unit class has its padding set to 60px.
I guess, in this particular case, described above, it depends on your screen resolution. As Twitter Bootstrap uses responsive CSS, the width of the starter-template.html changes discretely, and in some cases padding is minimal. You could try changing your browser window width to see how padding (container width) changes dynamically. The same for hero.html, but as hero.html contains more content, the width in hero.html example switches earlier than in starter-template.html at the same screen resolution.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.