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 ;)
Related
I saw this page where, when you change the window width, the layout change with simple animation. Does anybody know the name of this plug-in so I can look for some tutorials? I tried to look at the source code but I can't find anything useful.
I don't think it's a plugin -- it's probably using media queries, which are a part of CSS3.
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.
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.
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.