Here is what I want to achieve with Polymer Elements:
Polymer Structure
The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.
I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.
Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.
I would be very thankful for a codepen (or similar) example on how code and result could look like.
Update: I found the solution here: How to control number of items per row using media queries in Flexbox?
You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.
Related
I was wondering if it's possible to change the order of the boxes when the window's size is reduce. For now, I have this:
Big window
And when I reduce the window's size I got this:
Small window
but what I want is one under the other like this:
1
3
2
Thank you !
Looks as though you want to employ breakpoints in your CSS. Check out this MDN docs page for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Essentially, you set width characteristics and style accordingly. This is essentially as close as CSS comes to being a logical programming language (aside from animations).
Playing with flexbox characteristics such as flex-direction: column/row will decide what direction the elements in a given container are displayed.
So I'm testing CSS's grid abilities and one of the things I can't figure out is zooming levels from browsers and the behavior of images within them.
e.g. If I change the viewport it's all fine. The grid and it's images scales perfectly but there are users who use ctrl+- or cmd+-.
If this is used the image is scaled like it should but the grid doesn't scale like I thought it would.
I created a basic grid containing 4 columns and no rows. I don't want to have the width full screen so I added a margin on the container holding the grid of 25%.
The grid is place within the center. Here is a Fiddle.
https://jsfiddle.net/kagprzae/
Can anyone see where I missed a turn?
---- SEMI-SOLVED IT----
So The trick is to use absolute pixels. That way you can use ctrl/cmd+-
The downside is that the grid isn't responsive anymore so you have to use #media queries to change layout...
I'm not sure what I believe would be the best approach to do this.
---- COMPLETE SOLUTION NO JS ----
So after some (a lot) of testing and thinking I came up with the following solution.
Give the .container a width (in my case I could) and calculate your grid according to a 100% width.
You can margin:0 auto; to center the div.
See this fiddle
I'm trying to reproduce this 3 column grid http://romeavenue.com/en/2/Tours-Of-Italy but i can't get it to work. All i get is a 2 column grid and i can't work out why - see http://eternalcitytours.com/en/2/Tours-Of-Italy
Can anyone see what i'm doing wrong?? PS sites should be responsive to change with viewport.
Thanks
Tom
Isotope calculates the number of columns, based on the width of the parent element. When calculating the width, you also have to bear in mind padding and margin, as part of the box-model.
Simply changing .feature to have a width of 1000px gives you three columns:
feature {
width: 1000px;
}
Obviously, you'll have to do a bit of adjustment of the rest of the layout to make it work correctly, but that should give you a start.
Given that there is no code available and i cannot yet comment, my first guess would be that the container hasn't got enough width for 3 columns.
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/