I've got Zurb Foundation 4 setup in an example as per the instructions here.
When I create a basic page with one row and 3 columns with a width of 4 and I change the viewport (browser) size, the width of the columns do not change. They just stay at the static value of whatever it started at.
I was under the impression that it should 'just work' to scale the widths of the columns dynamically to be responsive to screen size.
Is there something I'm missing here?
Here is the test application demonstrating my troubles.
Just dawned on me that the problem was that I was setting a fixed width on the body element. Ooops!
Related
If you have a designer that is not specifically designing a PSD(mockup) around bootstrap column sizes how do you make the two fit ? It seems to me the options are :
1. Generate a Custom bootstrap grid
2. Don't use bootstrap
3. Use a mix of bootstrap and fixed width columns (Yuck? )
I'm sure I'm not the only one who has ever faced this problem . Looking for real world solutions or documentation. Not theories.
thanks
When you have a psd file, the problem that you can encounter is the width of the blocks. The height don't causes problems, but the width ussually do because mabey the psd is not made to work with 12 colums like bootstrap does, but the solution for this case is the nested grid. You keep nesting the elements until you get the right width of your blocks. I didn't recived yet any psd that i could not build it with bootstrap.
I am using Bootstrap on a webpage and am having problems with the rows scaling down to mobile.
The intended effect is for rows separated into 4 equal parts per row scale down to 2 equal divisions per row on Mobile Devices. This works well except for when the device goes below a certain width (approximately 335 px). Below that threshold, the rows get all messed up in some areas where the divisions are not horizontally aligned any longer.
Here is a link to the page so you can see what I mean.
Keep in mind the problem is only on a very small screen size so you will have to shrink your browser window down to < 335px in width.
What exactly is causing this? And how do you think it can be fixed?
For the HTML & CSS please follow the link to www.texasca.com/team.html
The markup and CSS seem to complicated/long to actually put into the question, but let me know if you want me to and I will do so.
Here is an image of the problem:
Thanks guys!
This looks like a float clearing issue. Try adding Bootstraps "clearfix" class to your divs. You can get more information about this issue here http://getbootstrap.com/css/#grid-responsive-resets.
So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
Sorry if this post is too many of question, but because i weak in web design but i want to do these effect in my website, could you guy please let me know on how to do it ?
First...Please visit this site
http://net.tutsplus.com/
Question 1 : May i know how could i do the effect of resizing in Asp MVC 3 ?
when our site got a sidebar user screen size less than 1280x800, it will display single column of sidebar. When user screen size larger than 1280x800, it will display two column of sidebar.
Question 2 : when the screen size is too small, left side of site will display only about 20px of margin. All the image and background will hidden. exact like when you re-size your browser when opening nettuts site.
The best way to adjust the layout of a page with respect to the size of the viewport that it is being displayed on is with CSS Media queries. Before you do anything, read this:
http://www.alistapart.com/articles/responsive-web-design/
It's practically the bible on the subject.
After that, give the specs a read:
http://www.w3.org/TR/css3-mediaqueries/
The less CSS framework comes with a set of useful media queries and is something I use as a very simple framework:
http://lessframework.com/
It depends of the positioning atribute: absolute, relative or fixed..
Try to use percentage rather than an absolute, relative or fixed value.
Otherwise try to control the left-margin, right-margin, top and bottom and test, test and more test until it get what you expect.
I do this myself all the time, and always work.
Answer to Question 1
This is not ASP but JavaScript. Basically you will need a script that is launched each time you resize the browser. It should then check the new viewport width and modify some of the CSS for the sidebar
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)