Is there a framework out there for creating responsive websites where the width is not set? I've been using skeleton but that uses 960px and other frameworks uses around the same width. I need to know if it's possible to have a responsive website where regardless of the width of my screen, it will still work in a tablet & mobile?
I hand code over using frameworks, but you should be able to just set the skeleton 960px width to an em or percentage value, as long as they have coded the innards to be percentage based it will still all work, code here that looks good to reset to % values: http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-widescreen/ :)
http://gumbyframework.com/ Perhaps? I just did a google search for responsive grids and there's a lot out there... unless I don't understand your question.
Related
I have a question what I couldn't find an answer for.
Google Chrome has an option to change screen size so you could see if your site is responsive. By setting it to 1366x768 it seems to be perfect, but if using laptop/changing screen resolution to 1366x768 it doesn't fit suddenly only if changing zoom value to 80%. I know I'm not providing any code here, just wondering why such thing is happening?
In my experience this has been due to using absolute pixel values and font sizes. I personally have found using em and percentages % rather than px helps at times as well as using a responsive grid system, whether directly coded in CSS or through something like Bootstrap. I would highly recommend Bootstrap as it is very easy to get into and will save you tons of time.
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com
I'm having a problem with a website I've built: whenever I view the site on a smaller monitor or when I resize the browser window, the content gets covered by the other divs. I need the content to be fully visible, no matter what size the browser is.
http://sophisticateddesign.nl/cfreport/overons.html
Also, on the homepage the text gets cut off a little bit on the bottom row when I resize the browser. I need this row to increase in height a bit, which apparently can't be achieved by simply increasing the divs' height.
http://sophisticateddesign.nl/cfreport/index.html
You should take a look at responsive web design. By using a fluid grid together with one or many media queries you can achieve what you're asking for.
Here's a good introduction if you'd like to get started. I can also highly recommend Ethan Marcotte's book about the subject!
The simplest way is not to define widths in pixels but using only width in %. You defined for example width: 960px; for <html> so if the browser window is less than 960px the whole content of this site won't be visible. You also defined the footer width and probably some more elements.
But the true is nowadays you should learn rather Responsive Web Design to create your page adjusting to device width. Many sites are being used by people on PC, laptops, tablets and mobile phones and you cannot create complex site to look nice on all those devices without using responsive design techniques.
I am just starting out with HTML5. I do understand that using fluid design is an integral part of RWD. So instead of specifying width in px , I am using it in percentage. Have two questions.
1) I find myself creating more breakpoints and specifying different width for each of the points. How to stop this?
2)Also I want to know whether there is any way I can stop the content from resizing after a specified width say after 1024px (58 em) I dont want the application to resize further since the input elements look awkward and stretched beyond this point.
If you are just starting with responsive design, you might want to consider using one of the established frameworks like bootstrap or foundation ... and there are several other good ones as well.
It will save you heaps of time and questions like those you are asking will be managed by the framework itself.
FWIW, I'm not against roll-your-own solutions to responsive design, but there's so much to learn to get good cross browser/platform results that I think they have a lot going for them and are worth looking at seriously.
Good luck!
I am using Skeleton now and like how it manages screens of different sizes but its max width is 960px. Please recommend me some responsive CSS framework that is created and tested for screens up to 1920px width. I know I can update existing Skeleton instance for my needs but I'd like to try something ready-to-use.
Thanks.
Most grid frameworks don't tend to go right up to 1920, it's up to you to extend them the last bit. Check out these two for alternatives to Skeleton though:
http://www.cssgrid.net
http://www.tinyfluidgrid.com
I do believe you can set a width as high as you want with Zurb Foundation. Personally, I never go this high up, but see how it fares. It should size down appropriately. Foundation does come with a lot of extras, but you can opt out of them on the download page.
...actually, I just did a quick download, with just the responsive CSS and main styles and a couple of the pre-made HTML templates, and sized the window up. Works pretty well, I think. I set the max-width at 1920px. Figure out how many columns you need, etc. and test it out.