I've searched all over for the answer to getting the proper column widths for 16 column bootstrap responsive layouts.
I've found posts that suggest this can be done. But it does not work for me.
I've tried the Bootstrap customize page. But it doesn't update the responsive part at all. I end up with span16 widths that are 120%+
I tried using the less files and updating the variables. But, again, I end up with wrong widths – for 1200px+ screens, I end up with a 1600px-wide layout.
Perhaps I could update all the values for each screen size individually. But since it's not just the span widths but also inputs and other widths for each screen size, it really starts to get unruly. Especially since I'm not 100% certain what the widths are supposed to be, especially when you get to smaller screen sizes.
There must be others who've run into this issue. So, maybe I'm just being obtuse.
But any guidance or wisdom on this issue is greatly appreciated.
Much thanks.
It has been taken care of in the soon to come twitter bootstrap 2.1.0.
Related
I am farely new to both HTML & CSS (maybe 4/5 months experience.),
I have started developing several websites as a learning basis,
& then I realised
that all of my designs were not 'responsive', so subsequently, I have started to replace all my 'px' values with vw, vh, vmax & vmin.. I have run into some sort of brick wall with my learning curve and wondering if anyone else has experienced this or knows any good sources that could help enlighten me..
Using the 'vw' property is at first sight going well, when I change the browser size everything shrinks, as intended to the viewport width, but getting the vertical scaling of objects, divs, inputs & options is proving to be somewhat difficult. I have attempted playing around with calc() vmin, vmax, vh etc, but they don't seem to be interchangeable unless I stick all of these into css variables. I know that flex-box and grid are designed to be responsive but these still don't seem to do much for the vertical scaling on smaller devices.
I have heard of em's & rems as unit's for font but these are not "responsive",
in the same way Vw & Vh are. ie, changing size on window resize.
Is there something I'm missing, Youtube searches for responsive design only yield hundreds of results for both flex-box and grid. But nothing much for general scaling down of both height and width (proportionatly)..
the first main question is which one is better out of the two
for proportionate scaling
(Vmin or Vmax)? across a range of devices?
if I am currently not intending to use any media queries?
I've tried multiple variations of calc(vw -*/+ vmin/vmax) + px/em/vh/vw/rem..
but the vertical measurements still stay the same... Can Anyone point me towards a good resource or video on youtube for this subject..
I'm finding the inspect element/test by device app in firefox very usefull, but need a shove in the right direction....
Any Ideas??
The first thing would be to check if you have set the viewport meta in your index.html file. If not that should be your very first step.
Secondly before writing the css for a website, you should go through the flex box and grids in css. You could spare with grids but flex box is of utmost importance. Then you could go further and study a little about the BEM model for css. Playing around with percentages and REM’s or vh may not help as you would have a web page which would shrink and expand according to the content that you tend to render. You should therefore make not of the layout of your website and what all things need to stay fixed and what all is going to change when you switch to another device. You should also go through using min-height , max-height and min-width, max-width with flex box that should make your life easy. Good Luck!!!!
try to search about bootstrap because when it comes responsiveness of the website bootstrap is your friend.
I am new to Bourbon / Neat framework, and the past 2 days i've been setting my environment up, but i am having issues configuring the Grid.
The issue is that no matter how much i try, there are some spacing issue when it comes to the grid, there is a small space in between columns in the grid, which is giving me a headache, and i have no idea what is causing it.
As you can see from the image, the right column, is slightly on the left, is this a common occurrence in neat?
Thank you in advance.
If you are using the visual grid, this can be off by a few pixels. Please see the documentation here:
http://thoughtbot.github.io/neat-docs/latest/#visual-grid
The overlaid grid may be few pixels off depending on the browser's
rendering engine and pixel rounding algorithm.
Hope this helps
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
Okay, here goes (first time asking a question, so bear with me and let me know if you could use further information.)
As my title says, I'm using Bootstrap to generate a horizontal menu (called 'navbar' in the CSS) and when I make the screen size a little smaller, the content of the navbar furthest to the right starts disappearing or going to the next line. I would appreciate this (and understand) if it were happening when the width gets close to the content, but it's happening when the width is about 750-768px. In some tests, I have seen the content itself completely go poof. Honestly, if someone can even tell me why (and what) is happening I would appreciate it. Heck, it might end up being a great accessibility trick!
What I have discovered so far is a strange little bit of code: #media (min-width: 768px). What's really strange to me is that the Chrome inspector won't even let me alter this thing. That is something I have never seen before. I'll be honest, I'm not too familiar with this formatting property either but my education thus far has not provided enough insight.
Now I'm hoping that this is a problem that someone finds familiar (I've been looking, but no hits) because I'd rather not dump the entire codebase online at this point. If it is necessary, I will comply, but I'm hoping someone can share their own experiences with this problem so I can put down my 'fist of anger'. It's a very angry fist. Trust me.
Shipping is a feature...perhaps the most important feature.
As others have noted above, the behaviour you mention is the Bootstrap default ... you can customise it though.
The CSS media query #media (min-width: 768px) ... sets the viewport or window width at which the nav menu collapses. If you want to change this, one option is to go to http://getbootstrap.com/customize/ , scroll down to the media query breakpoints and set #screen-sm to what ever width you want.
If you go to http://getbootstrap.com/customize/ , scroll to the grid system section you can customise the navbar collapse with #grid-float-breakpoint . Thanks to cvrebert for the correction below
Then go to the bottom of the page and compile and download your customised Bootstrap CSS file.
If you use LESS, you can do something similar as well.
Hope this helps relax the fist of anger ;)
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.