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
Related
I have to make a checkerboard homepage with several div's containing pictures and text.
I made something like this :
In the CSS, all blocks are placed with an absolute position and some top, left properties (in px).
The design is correct, but I want to make all this responsive, but in 2 different ways :
1 - Adapt all the body to the screen and eventually increase the font-size property.
2 - Simply align all the blocks in two or one column(s) (for smartphones for example)
I don't want an answer with a ready-made code, just help to realize the responsive version of my homepage.
You should really look into using a CSS framework rather than relying on absolute positioning, which is difficult to adapt for use with multiple screen sizes and make responsive.
Although there is a learning curve when first attempting to use a CSS framework, it quickly pays dividends, especially when taking into account cross-browser and responsive-design considerations.
Probably the most popular CSS framework is Bootstrap, which is responsive by default, and would make producing your layout relatively simple.
Another good option for a CSS framework is Foundation.
There are countless others. Here's a list: http://usablica.github.io/front-end-frameworks/compare.html
I used to realize the responsive with the float columns and change the columns' width through media query. But in your job, you should change the hope wrapper's width and reset the columns' left and top through js. You can consult the plugin 'Masonry', which may help you.
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 make use of percentages by specifying the width of elements I want to stretch and percentages when specifying "left" "left:40%;" for example and a relative position. This allows elements to move with the page when it's resized and stretch but at certain resolutions sizes the elements don't entirely stay in place. Am I stuck using media queries for this issue or is there another way? I'm still using media queries but I also don't want my design breaking so early before reaching breakpoints, I want it to be as flexible/elastic as possible before having to have media queries kick in.
I think instead of worrying about those wacky sizes where your page looks funky, you should think about the most common screen sizes that are actually used.
I know exactly what you mean about those breakpoints. That's why I use screenfly to test my site on the most common screen sizes and work from there.
And if your site elements aren't maintaining your desired positions, then you are probably calculating the percentages wrongly. Here is a great article that helped me with fluid layouts and how to set up the percentages and what-not: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
Use float: left with a percentage width instead, and that should accomplish what you need. If you're using left: 40% for an offset (gap or spacing), try using margin-left.
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/
I have put together a simple static layout where I would lilke to understand how to convert the static widths into percentages in order to eventually create a responsive web layout. Can anyone recommend the easiest way to work out layout widths, font-sizes, padding and margins in percentages? I have been so used to creating my layouts in static format but I would love a complete understanding on how to implement this % technique.
Link to my simple layout is here: http://jsfiddle.net/9fH87/
All advice welcomed,
Thanks Kyle
Replacing the fixed width of the two columns with 45%, you'll get a fluid layout, it means a layout that fit it self to the container.
You can find tons of examples with an easy search.
Honestly, percentages are a bad idea, because they correspond to how wide the viewport is all the time, if you resize the viewport closer together, all the words just squish together.
The best way to do it is to make a container div (name it body-container), give it whatever width you want, and center it using this code margin: 0 auto; then set the min-width of the body to something acceptable. 1080px is usually good since most people nowadays have a resolution at least 1080 wide.
Here is my example: http://jsbin.com/ufesif/2