CSS Percentages And Pixels - css

I like to think of myself as having some serious CSS swagger(I am also a PHP hack, and pretty good at Javascript), but today I was chatting with a designer about a specific situation, and honestly I just did not know the answer to it. I was hoping someone could elaborate on the problem.
Scenario:
I hear many a people say, "Oh I use percentages for everything because of responsive design", but then you go and look at their css, and they are using px all over the place for margins, padding etc.
My problem is that should I be using pixels at all? I'd say the main pain point I have in understanding this, is when it comes to high resolution screens.
For example, I was creating a pretty simple "hero" in which I set the height of my container to 700px tall with a background image and some text, while setting the width of it to 100%. On my screen I was creating it on, it displayed full height of my screen(which was the intention), but when I had someone else view it on a higher resolution laptop screen, the picture was significantly shorter in height, with white space underneath it, failing to fill the whole height of the screen.
I am looking for someone to explain exactly how pixels values are affected on higher resolution screens, and if you should always use percentages.
For example, If I set a container to be 300px wide on a "normal" resolution screen, will that same container be 150px wide on the higher resolution screen, and also look shrunken and terrible?
Say I start using percentages for things like margin and padding, I am curious as to how css would calculate that? For example, say I have a contact form with many inputs stacked on top of eachother, and I do something like the following:
input {
margin-bottom: 2.5%;
}
Where would the css be calculating that 2.5% from? Does it say, "Make that margin-bottom 2.5% of the height of it's parent? I am just confused as what it would be based off of.
Any input is greatly appreciated. Thank you.

First of all, I want to refer to an answer given on SO that explains the percentage property really good: https://stackoverflow.com/a/31032477/4459695
So should I use pixels?
Using pixels should indeed be avoided in modern Web Design, for a few simple reasons:
Pixels are fixed. They do not adapt to different screen sizes or viewports, scalings or layouts. Since mobile first is a goto pattern and responsive Web Design relies on adaptable units, and since pixels are avoidable, - avoid them.
High resolution screens are getting more and more mainstream, and if you do not want to adapt to even more media queries (for the larger screens), you should not be using pixels.
There are better, more dynamic alternatives. These include vw, vh, em, rem and of course %.
But when to use which unit?
em and rem are really good for font sizes or anything like that. They will easily scale and can be used for margins and paddings too, depending on content size.
% are best used in relative object positioning, not so much in margins, paddings or font-sizes, although they can (margins and paddings are okay, I guess). What I mean by this is that percentages work best when combining them with width, height or anything like that (they work great in flex-layouts, for example).
vw and vh are allrounders - I personally do not use them in specific cases, but they are quite handy sometimes. Best example would be an overlay which should fill the complete viewport.
All those units are dynamic and depend on the viewport. This is great, because this allows for flexible styling. Pixels do not.

% value in margin and padding is always % of the parent's width.
So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.
.container {
width: 100px;
background: green;
}
.child25,
.child45,
.child-none{
background: yellow;
}
.child25 {
margin-bottom: 25%;
}
.child45 {
margin-bottom: 45%;
}
<div class="container">
<div class="child25">This one should have 25px margin bottom.</div>
<div class="child45">This one should have 45px margin bottom.</div>
<div class="child-none">This one has no margin</div>
</div>
As for your hero problem, if you want the hero's height to be full screen's height, use height: 100vh;, which mean 100% of the viewport's height.
A 700px height element will always be 700px high on any screen. The different in real-life perceived size is because of the screen's ppi (pixel per inch), or dpi (dot per inch) as they are usually called on mobile devices. The value refer to the number of pixel/dot that fill each real-life inch on that screen.

Related

Banner and heading

I just want to create image with title and button on top.
Text and button should be in container with set width. I just want to know what is the best way to do that.
There are lots of way that makes you confuse on internet and I don't know which one is best!
If your background image has always the same aspect ratio, you can make the height of the container proportional to the width of the background image.
Let's say your background image is 2000 x 1000 px. And let's say the screen is currently 800px wide. Then you want the container with the background image to be 400px high. To achieve this without setting hard coded breakpoints, you can use the "padding trick". If you set the padding (top or bottom) of a child element in percent, it calculates the height as a percentage of the parent element's width. So if you set the the container's padding-top to 50%, it will be half as high as the the parent element is wide. So in the case of 2000 x 1000 px: 1000 / 2000 * 100 = 50%.
.parent_w_bg {
background-image: url(...);
width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}
<div class="parent_w_bg">
<div class="container">
Header and button etc.
</div>
</div>
In such a scenario you should position the container relatively and it's children absolute, for example the header with a top value and the button with a bottom value.
Here a simple fiddle: https://jsfiddle.net/mmcc5rnk/
Using multiple image sizes for different breakpoints can be useful, but also problematic. Depends on your specific case, the size of your image(s) and the amount of breakpoints you want to use (and the differences). Using different images according to some specified breakpoints is fine and can be used regardless of the implementation.
Setting a height for an entire section is never a good idea, unless specified in the project requirements. Always depend on the inner content to stretch your section vertically.
About the background - if you are using multiple images, you can apply different sizes and positions for them in one common background setting so that they can scale an re-arrange when the viewport resizes, or if you have one big image, you can simply set the image background size to cover like so:
background: url('images/image.jpg') no-repeat center center/cover;
There are many ways to achieve your goal, but the most up to date way of doing things is using the Flexbox model.
All flexbox properties must be prefixed, so they can work across all browsers.
Explaining how Flex works is too broad for an answer, so you will have to learn it from the ground up.
Here is a Fiddle that represents your aim.
No need to add different images for each breakpoint,
image will resize automatically, you can add dynamic height by using jQuery
Demo here

Can using percentages for height of padding/margin/border be better than em?

What are good and recommended uses of percentage values for vertical CSS declarations?
In other words, under responsive design, are we overlooking something where % would be beneficial over em?
Because it seems that for most situations (except for cases where you want all sides equal; credit), em would be better served than %, consider:
Using percentages for the horizontal values of padding, margin or border of elements in CSS is fairly standard — especially in responsive web design. For example, take margin-left: 7.2% and padding: 0 5%. It also makes sense: the wider the screen, then the space will increase proportionally.
One can do the same for the vertical values:
margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;
As expected, an increasing viewport width will increase the corresponding vertical spaces.
However, in the cases I've come across, it can look a bit odd — unfitting to the design. It seems that em values may be better served.* But, on the other hand, where would it be beneficial to use percentages?
* Since these won't increase with the width of the screen, but will increase according to the font size of the page.
I don't think there's any right or wrong answers to this question. It really does depend on your design.
As you noted, % values, even on vertical-based properties on margin & padding, are still relative to the width of the document. So if your design requires even padding, then % values all round are great.
But, if the design is content oriented, and you're still using % values on the horizontal properties for responsive design, % might not be the best for the vertical properties. You may, for example, want the padding-top to be exactly the height of 1 line of text. So you'd use ems.
But I digress; it really does depend on your design and personal preference.
Yes, depending on the situation just like any other css practice.
Say you have a container div that uses 100% of the screen height and you have a header you want to appear at the top of your div. You could say margin-top: 15px on your header, which works, but then if I come and view it on my phone it will look very squished.
So instead you say margin-top: 10% then no matter what screen I come and view your site on your header is always 10% from the top of the div. which means the relative flow of your layout will always be the same.
The general rule is this: For any valid css you can write there is a use-case where it would be the best way to go about achieving your design goal. Forget anyone who says "Never use negative margins" or "always avoid absolute positioning" or any of the other crap they throw around.
I have been pondering this question as well recently and after reading around the internet the 'rule of thumb' I'm beginning to lean on is as follows. First, the reason why % is good responsive design for the horizontal axis is because as we all know the width of your browser can vary greatly depending whether the user is on a phone or computer. The vertical axis is different however because while it can also vary like the horizontal axis, many webpages are created for a vertical scroll and the user is expecting to scroll down. In such cases a little more vertical scrolling due to less responsive ems is fine.
To answer your question based on that assumption, a time in which you would use % for the vertical margin is when you have a design where you don't want to make the user scroll much to see a part of the page. Specific examples might be a single-page web app where you don't want any scrolling or a header or initial page content such as a picture that you would want the user to see in its entirety without having to scroll down.

How to center images in a responsive grid with CSS only and supporting retina displays?

I have a page where I need to display a photo gallery in a responsive website, with support for retina displays too.
The grid must be composed by blocks that fill a given container proportionally in this way:
If the screen width is >= 1200px the grid must be composed by 4 columns (25% width for each block)
If the screen width is < 1200px and >= 768px the grid must be composed by 3 columns (33% width for each block)
If the screen width is <= 767px the grid must be composed by 2 columns (50% width for each block)
All the grid blocks must be in 2:3 ratio sizes, and measuring a grid block with a 1980px wide viewport I can tell you is around 500px (this is not a limit, it's just a measure data useful I think for what I need explained below).
This can be easely achieved via #media queries of course, and using padding-top: 66.66666666666667% for the 2:3 ratio; I'm trying to give you as much data as I can to explain the limits I must respect.
So here comes the tricky part:
the thumbnails for the grid are of various sizes and aspect ratios, and I need to center them in their respective grid blocks, vertically and horizzontally, while fitting/covering the whole grid block area.Since the grid is responsive, I need the thumbs to scale proportionally along with their block for narrow viewports. To complicate things even more I need to support retina displays, so the thumbs must be double in size and downscaled by half, and fit in their grid blocks too.
How can this be achieved? (preferably only via CSS)
Additional data:
I'm using joomla! 2.5 as CMS for this project, and I need to give my client a very simple way to add images. The best and easiest solution I found is Simple Image Gallery: the only need I have for this plugin is the auto thumbs generating procedure + auto generated <ul> grid in the page, and is very simple to override the HTML+css output structure for my needs.
As for retina displays, it should be better to provide a correct #2x syntax, but I don't really care; as for performance concerns, I think that giving for all display a single downscaled image is more easy to handle, of course, but also a really effective and efficient way to handle the img weight!
See this for reference, basically you use images with dimensions doubled and a jpg compression of 20 or so, downscale the image by half with CSS, and you still have a nice looking image, good for both normal and retina displays. Also with a reduced weight from the original size image by up to 25%!
I've tested this myself and I can tell that this is working quite well, in very few cases I had more weight than a normal sized image, and by negligible amounts (compared to the ease and benefits).
Use a combination of techniques to do this:
Fit and Shrink technique
Centering an image in a box
Inline-block thumbs
Long question, but if its only about the centering of the images of different sizes you could do it like this:
You need Divs which you will float, those will have the same heights and wdths (you can adjust that however for the different queries).
After that you have another div in each of those divs for vertical and horizontal center:
<div class="outer">
<div class="table">
<div class="image"></div>
</div>
</div>
Basically, you float the outer div, apply display table-cell to the .table div, then apply vertical align middle, for vertical centering.
IMPORTANT
A floated div with display:table cell will ignore vertical align! Therfore the additional div!
http://jsbin.com/ajunol/2/edit
.outer {
height:100px;
width:100px;
border:solid;
float:left;
margin:10px;
}
.table {
height:100px;
width:100px;
border:solid;
display:table-cell;
vertical-align:middle;
}
.image {
height:50px;
width:50px;
background-color:red;
margin:0 auto;
max-width:100%;
}
Height, width and background color, obv you can disregard, but you should have max-width 100% so the image doesnt exceed the containing box.
In my example the images are represented as divs, but obviously you will have image tags there and not divs. To work with this, replace the divs with class image with images.

CSS Problem, fixed contentarea with left and right sidebar?

i really need your help with a CSS-Layout. I tried a few time, however i've no chance (and actually no idea how) to solve it. Moreover I don't even know if it's possible the way I want it!
The #mainContent should always be centered horizontally in the browserwindow. It should be 1024px in width and a 100% of the windowheight. Now the difficult part. I need two divs, one on the left side, one on the right side of the #mainContent. Both should be 100% in height, but should ALWAYS have the rest of the browserwindow. If the browserwindow has only 1024px in width #navLeft and #navRight are invisible.
Is that even possible, if so, HOW?
thank you
1024 is a poor choice of widths. Monitors with 1024 x 768 resolution will ALWAYS get vertical scroll bars. 960px wide is the common choice.
You put the whole thing in a wrapper DIV:
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Inside you have three DIVS, floated-left with specified widths.
Controlling the visibility, based on the user's browser width needs to be done via JavaScript. CSS alone cannot do this.
CORRECTION: this article explains how, and it's something I never knew you could do.

CSS: Fixed or Float Layout? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
My question revolves around CSS Fixed Layout vs a Float Layout that extends to fill the width of the browser.
Right now the issue I'm running into is to have the masthead resize depending on the width of the page (something that I understand isn't possible given current browser implementation of CSS3's background-image: size;). At this point, I feel like I've reached an impasse all around: Do I rework the site to use a fixed CSS layout, or do I keep the current layout and try to make the masthead image expand to fill most of the space provided? Moreover, what are the pros and cons of moving to a fixed width layout, and the other (unseen) ramifications of using one layout over another?
The site in question will be given as a comment to this question -- I don't want to be seen as trying to increase traffic to it.
Edit: Any other thoughts?
What about revealing more or less of the image as the browser is resized, rather than scaling the image? It's not quite the same effect, but it's an easy way to fill an entire space with an image.
Let's assume, for the sake of the example, that your masthead's background image contains a logo of some sort on top of, say, a photograph of a city skyline. This is, overall, 1600px wide. The logo sits to the left of the image while the cityscape extends far right. And we'll assume your markup looks roughly like this:
<div id="page">
<div id="masthead">...</div>
<div id="navigation">...</div>
...
</div>
We can set the #page element to an elastic width and apply a background image to the #masthead element:
#page {
max-width: 1600px;
min-width: 800px;
width: 80%;
}
#masthead {
background: url('path/to/image.jpg') no-repeat left top;
height: 100px;
width: auto;
}
What happens here is that the #masthead element will expand to the width of the #page element, which will be somewhere between 800px and 1600px wide (inclusive) depending on how wide the browser window is. When the #page element is 800px wide, you see only the left-most 800px of the skyline; when it's 1600px wide, you see the entire skyline. That way your logo is always visible and when the browser is resized, more of the cityscape is revealed.
This does require having a larger image to start with (at least as wide as your max-width, if you go elastic), but the result is a masthead that will look good no matter what size it is--without relying on, as strager mentioned, browsers' image resizing algorithms.
What kind of image is it? Is any part of it repeatable? Sometimes using two layers, one or the tag for a repeating element of the image and another for the fixed element.
Can we see an example? It would be easier to get to the right answer for your problem.
If you are trying to expand your background-image to the width of your page, it is better to use a fixed-sized layout as there is no cross-browser method to making a background-image expand to varying sizes that are dependent on the visitors resolution.
Fixed width layouts provide more flexibility for the designer, but not for the visitor. If you create a layout that is X pixels wide, then you are able to fine-tune your website pixel-by-pixel to your liking whereas "float" layouts (I call them liquid layouts) are based entirely on percent values and therefore differ from computer-to-computer. I find this difficult because you can test the layout on your screen and not know how it appears on someone else's, and (for ex.) a 20px margin has more of an effect on a 768px or 960px fixed-width layout than it does on a 1280px-liquid computer screen.
The major con, IMO, to a fixed-width layout is the fact that it looks too small on larger screens and too big on smaller screens. 768px used to be a fairly standard fixed-width layout, but now that is too small as the world moves away from 800x600. Now 960px is fairly standard, which is too big for 800x600 but still too small on 1280x1024.
It all depends on your audience and how your site fits together. Some layout can be made liquid and work perfectly fine, while others must be fixed (like the one you described).
Why not use an <img> tag for your header image (masthead) instead of using a background image?
I would suggest not scaling your header graphic; most browsers are terrible at image scaling (nearest neighbor what?) and it won't look good for many people.
I'm for fluid/float/liquid layouts myself. I fact, most of my sites use a single column, so I don't have to worry about all the complexities "normal" site layouts have.
It is generally a bad idea to create a layout where text-columns expand to the browser with. Text becomes hard to read if the lines grow to long. I recommend settling on a fixed with for the text-column, perhaps around 50 letters wide.

Resources