I'm adapting the Masonry Tumblelog layout so that the single column width is 320px and multiples of that for two/three columns etc, so that it will work for iPhone and up.
I'm using media queries to squash the all columns down to the 320 for iPhone. It's kind of working, i.e. it's stacking and reducing to one column. Problem is that it is tiny on the iPhone screen, covering only about a 5th of the width. I've followed the css elements from the div upwards and all are set to 320 in the media queries. The site is at http://www.4pixels.com. Any ideas?
I use the code here : http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/
It adjusts the column width according to the container's width. Take a look.
Related
I need to have one 740px column for the content and one 320px for the sidebar so the container must be 1060px.
Is there anyway to get this exact grid size in bootstrap ?
I know I can customize there http://getbootstrap.com/customize/ but i dont know the exact numbers for get it.
You won't really get this "exact grid size in bootstrap" since the Bootstrap grid uses percentage-based columns widths.
The simplest approach is to override the Bootstrap css to set a specific width on those columns, which will (of course) result in the columns no longer being responsive. You can still use the responsive grid nested inside the outer columns, and other Bootstrap features.
2-columns fixed width layout: http://bootply.com/B9ti0Rjer1
You could optionally use a media query to apply the fixed widths on larger screens only: http://bootply.com/5Kv1z1XCQK
I have been mulling over this SO post regarding how to implement scaling divs (for iPad viewers, etc)--see the fork with 12 votes:
Proportionally scale a div with CSS based on max-width (similar to img scaling)
The issue is that my current layout is using two float:left div IDs to make a row-like config for my divs. See here:
https://dl.dropboxusercontent.com/u/33061840/site/Pokesite.html
& my code:
http://pastebin.com/fspfRUD2
My question is, do I need to redo my divs so that they're positioned as Spader Shut's fork is? Or can I keep my current layout and still have my divs proportionally scale to window size?
What I ultimately want to achieve is for all my content to scale to window height, proportionally: so that iPad viewers, etc are still able to view the website.
Ended up using responsive tables: http://www.responsivegridsystem.com/
I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).
Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.
http://jsfiddle.net/langdonx/uFW2C/2/
It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.
So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?
Here are the business rules:
Max cell width: 320px
Minimum # cells per row: 2
this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
Cell border: 5px with a 2px outline
Visible margin between cells: 3px (margin is actually 5px, but outline bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a table on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a table. =[
-end mad rant
Media queries
CSS media queries might get you pretty close to a CSS-only solution.
The key concept here is using different layout grids based on the width of the browser, to vary the number of columns.
Media queries are the natural CSS way to change the layout based on the browser width. And they require no JavaScript. If you use a set of media queries -- each one targetting a different range of browser widths -- to control which layout grid is used, then all each grid has to do is be responsive -- percentage widths for each column, and let the content stretch to fill the column width.
Responsive Design
The question then becomes: Is it possible to automatically stretch each piece of content to fill the column using CSS alone? That depends on the type of content, how it's expected to behave when it stretches, and if there's any room for compromise with the graphic design.
Typically, the graphic design for a responsive website has to be tailored to suit the limitations of Responsive Design (with the graphic designers having a rough idea of what's feasible and what isn't). But... whatever can't be done automatically, can be done using JavaScript.
Relevant search terms for attempting to stretch the content: Responsive Design, Adaptive Content, Fluid Grid
Note: "Columns" in this case may simply mean the percentage width used for the floated containers for each piece of content. It doesn't have to mean "physical" columns, in the traditional sense.
I'm using CSS3 Multicolumns with column-width set at 200px, leaving column-count free to adapt to different screen sizes.
Here is the code I'm working on: http://jsfiddle.net/kBPUX/
On my 1280px wide laptop, the columns are centered as the window expands from one to two all the way up to four columns. It works great but then suddenly at four columns when the window is maximized, the columns all suddenly left justify leaving a big ugly gutter on the right.
Any idea what that's about and how to make columns centered at any resolution?
EDIT: After playing with it some more, I believe what is happening is that the browser doesn't want to make any more columns. Column-fill is left unspecified so it defaults to auto and tries to match the column heights as closely as possible. Adding more columns would result in columns with differing heights. It is at this point that I want to ensure the columns are centered in the parent container, and not left justified.
Notes: This works for me in Firefox, Chrome and IE9 which is all that I'm supporting. I absolutely will not touch JQuery layout products; it has to be pure CSS.
Why don't you use column-count?
http://jsfiddle.net/Svyy2/4/
Also look at the div's width. If you set them to the same width as columns you will get problems because width+padding+border > column width. Set it to 90%, for example.
As of today, I don't know of any working solutions to my problem, but I believe that the proper solution is the column-space-distribution property of the multicolumn spec, but it isn't implemented by any browser yet.
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.