How to convert any fixed width layout to flexi-width layout? any quick tips?
In a website should we make every thing flexi-width, i mean left or right sidebar and main content column ?
Should we make everything in 100% width or we should define a max-width for better readability?
Read this and you will know everything and too much. http://www.alistapart.com/articles/responsive-web-design/
To answer you question, i would assume you have lots of widths set to pixels. Figure out what percentages they are relative to the screen resolution, than change the widths to percentages and tweek accordingly.
I have noticed most sites now get screen resolution, then use fixed width for main containers.
Related
I'm currently trying to make a responsive navbar (and it works, is responsive), but at some window size, it becomes too big. So I tried to use #media (max-width) to block its growth at some point. Unfortunately, when I use px to describe new fixed size, the navbar is now affected by scaling of the page (ctrl+mouse wheel), and I'm trying to avoid this behavior.
Is there a workaround to my problem?
Little hard to understand your question, but any good navbar should scale width wise for a page. I kinda sounds like you set the height style to a percentage rather than pixel amount.
<div style='height:80px;width:100%;'>Content</div>
This makes a horizontally scaling bar, with a constant heigjht
I don't feel that neat's grid is truly fluid. A fluid grid would scale well all the way from mobile to a large tv screen such as 1920x1080. However the way that neat and bitters end up working creates a $max-width variable which is default set at 1088. Even if you change this however there is a size that the website will stop being fluid, the max-size. I feel a fluid layout would constantly grow and shrink no matter the size of the screen.
Currently my way around this is by using fill-parent
.outer-container {
#include fill-parent;
}
This works but it feels hacky, is there no way using neat to properly create a fully fluid grid? Setting max-width has it's limit.
You don't need to use outer-container on an element that's supposed to fill the entire viewport. The only thing that mixin does is centering an element, clearing its floats and giving it a max-width.
In CSS, element are width: 100% by default, so there is no need to specify anything if that's the expected result.
The 'fluid' part of Neat refers to the fact that it does't use fixed widths, but percentages.
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
I'm trying to design a fluid / responsive web design using bootstrap. I'm trying to design the layout so that it'll fit in many devices. My question about setting height to a layout element, such as the header or footer. I've got it in pixels right now, but I would like to know if I should be using some other form of measurement.
I'm probably over-thinking this, but I'd like to make sure I'm doing this the right way. Thanks in advance!
Avoid setting a height whenever possible. You can often get around - and preferably so - using padding on the element in question, and/or margin values on the element's children.
If you absolutely need to define a height, use min-height so that it'll grow as its children take up more vertical space.
Many times people fall back to defining static height values because the elements are also using float and add height to get content flow and backgrounds back. This is rather poor practice and if this is the case you should consider looking into methods of clearing floats.
Probably pixels are the best option if you have a lot different devices. Other measurements to consider:
em (1em equals default font size)
% (of the screen)
em and % is the good solution for fluid / responsive web design.
I will suggest for media query css
#media only screen and (max-device-width: 480px) {
}
Basically, on one of the pages of my website, I have a div with 60% width, in which all of my content is stored.
My problem is, when I try the site on different, lower resolution monitors, Some of the content in the div ends up being cut out.
I don't want to increase the width, but I have no ideas on how to fix the issue without doing so.
You can use media queries to change the style rules based on factors like device-width and resolution:
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example, you could adjust the font-size in the div based on the size of the viewport