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.
Related
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 ;)
I am relatively new to jquery UI. I am able to understand the functionality and making use of the widgets. However I find the widgets quite large and clunky and would like to resize them. Specifically I am using a large number of spinners, sliders and choice buttons. I would like to resize these to fit my page but can't figure out any way to do this. Please help.
There is a css file that comes with the widget, you can edit it, or you can overwrite the rules in you css file.
I'm currently building a site using this framework template: http://cargocollective.com/montessori
My goal is to make the thumbnails scale in size to fill 100% of the screen, just like this site: http://mariohugo.com (resize window to see this in action)
Does anyone know if this can be done by modifying the CSS in any way?
That site is done with JavaScript - if you turn your JavaScript off, you get no images at all. Not very compatible!
You can do something similar with fluid CSS layouts, though it won't be quite as slick as that site.
have a look at twitter bootstrap framework http://twitter.github.com/bootstrap/. It might help you.
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