When coding width for responsive, is it preferable to round off the value or specify the value as close as possible?
For example:
Base on my calculation my width is 67.328699%(left div) and 32.84%(right div)
or should I just round it off to
67%(left div) and 33%(right div)
which will add up to 100%?
Thanks for the help.
It's a good question, But I think there is no matter, because in small screens the percentage you round is very very small. But looking at the most famous responsive design of twitter bootstrap HERE they don't round up the values.
I suggest you too look at bootstrap's grid system it will help you a lot in designing responsive pages.
There are two ways to look at this. First, due to the nature of foating point arithmetic, you're probably not going to get an EXACT number, so rounding isn't going to break anything. You're never going to be exactly right anyway. Smarter people have written about this point: https://docs.python.org/2/tutorial/floatingpoint.html
Second, think about what the number actually 67.328699% means. you're trying to accurately define a size down to a millionth of a percent, or in other words a hundred millionth of your entire screen width. How much are you actually gaining by doing that?
Also, because of the limitations of floating point math, it's likely that if you make the widths sum to an exact 100%, when the user changes the screen width or sometimes simply with other resolutions, you're going to have the divs jumping. Sometimes they will be on the same line, sometimes they will not. I suggest you have them add up to slightly less than 100%.
edit: on another note, I would have a discussion with your designer and ask why they made such odd proportions. They should make designs around technology. Your job isn't to force the technology to fit a design.
Using 2 decimals would be fine, but keep in mind the box-model when you set the percentages(it's a good idea to always use box-sizing:border-box)
I would specify it rounded off, personally.
But if you are creating a responsive muti-column layout, I would suggest using a grid system like bootstrap
Related
I have to make a checkerboard homepage with several div's containing pictures and text.
I made something like this :
In the CSS, all blocks are placed with an absolute position and some top, left properties (in px).
The design is correct, but I want to make all this responsive, but in 2 different ways :
1 - Adapt all the body to the screen and eventually increase the font-size property.
2 - Simply align all the blocks in two or one column(s) (for smartphones for example)
I don't want an answer with a ready-made code, just help to realize the responsive version of my homepage.
You should really look into using a CSS framework rather than relying on absolute positioning, which is difficult to adapt for use with multiple screen sizes and make responsive.
Although there is a learning curve when first attempting to use a CSS framework, it quickly pays dividends, especially when taking into account cross-browser and responsive-design considerations.
Probably the most popular CSS framework is Bootstrap, which is responsive by default, and would make producing your layout relatively simple.
Another good option for a CSS framework is Foundation.
There are countless others. Here's a list: http://usablica.github.io/front-end-frameworks/compare.html
I used to realize the responsive with the float columns and change the columns' width through media query. But in your job, you should change the hope wrapper's width and reset the columns' left and top through js. You can consult the plugin 'Masonry', which may help you.
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
Until now I was using layout patterns with fixed arrangements, targeted for 1024-pixel width monitors. I think it's fixed to something like 980 pixels with some extra space on the left and right sides. Lately I was thinking about non-fixed solutions, where I can widen the frame to the width of the monitor. But there are also some very high monitor resolutions, which will make the page look too wide and too ugly. So it would be nice to set a maximum width as well and maybe minimum width too.
Firstly, what is it called when you don't use fixed layout? Is there a name for this?
Are there any disadvantages which I have to consider when going for this style?
I want to apply this style to a portal site, where I use a 3-column design with many boxes inside of each column.
Here are some notable "fluid" design examples:
http://addons.mozilla.org/
http://en.wikipedia.org/
I tend to call it "fixed width" or "fluid width" but "elastic" seems a popular term as well.
The cons are that getting a fluid/elastic design to look great on all monitors is tough, you mention larger monitors/resolutions, in my job I have to consider smaller monitors too.
Recommended reading:
http://www.alistapart.com/articles/elastic/
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
(the other articles on these sites are generally worth a read as well)
You will notice that the first example has got a limit. I often set a maximum width and then set alot of things inside that with percentage. So a sort of half way house if you like. It really depends on the site, what you wish to acheive and which screen res your users will use(available using market research)
newbie developer here.
There's this small problem I always encounter. Every time I try to change browser resolution (or what do you call the event when you scroll the mouse wheel while pressing ctrl), some elements (Mostly form elements) get to be shifted down or somewhere else, which does not conform with the original positioning. Im not sure if the problem is with the CSS or the markup itself and Im not really sure if this is much of a problem. Should I ignore it? (It doesn't feel very comfortable though, thinking that it might become problematic in the near future) Otherwise, any solution on how to avoid this?
Simple explanations are very much appreciated, Thanks.
(Perhaps the used term newbie should be replaced with noob?. Haha.)
Ed, it sounds like you are zooming in. The problem you describe occurs when you use absolute dimensions e.g. width: 20px;. To achieve a fluid layout you could use em instead e.g. width: 10em;.
You may find this Making the transition from px to em article useful.
Ed, perhaps you can also go for max-width and min-width in your css to avoid that. focusing on the resolution lets say 1024 x 768 . you can use min-width for both your columns that at point below this resolution it won't skip downwards. Let me know if that helped