For example i have this centered element with margin-top: -10%;
and i want on resize, more the window shrinks less that % become (like -6%).
I know of vw and vh, but those almost don't change at all on window resize if the distance we're working with is something small.
Is there a way with some margin-top: calc(); maybe with * doing some weird math trick to achieve what i mean?
For wide window, I added a media query. I used 1300px as an example. If the window is resized to larger than 1300px, the margin will be constant.
When the window starts to shrink below 1300px, the margin starts to change radically. I achieved this with this calculation:
margin-top: calc(-30px + 1300px - 100vw);
As you can see, at 1300px the margin will be exactly the same as if it would be bigger and it would use the media query, because
I subtracted the original margin,
then I added the breakpoint width (=1300px),
and then subtracted the window width which is exactly the same in that moment (=1300px).
So basically we use that as the "starting point". From then on, the more the window shrinks, the more radically the margin will go in the positive direction, because the shrinking width is negated in the equation. (Meaning, we increasingly negate less as the window shrinks.)
Play with it here to figure to achieve your own ideal numbers:
https://codepen.io/bradib0y/pen/xyzJYE
Related
I am creating a website that is mobile friendly. I've defined a fixed size for all buttons.
.btn
min-height:45px
When moving from a large screen to a small screen does the size of the pixel scale? For instance, if on a large desktop screen, 45px takes up 1% of screen height will it also take up 1% of screen height on a small mobile screen? It looks like it doesnt scale proportionally to the height of the screen. Should I be going about this a different way? Thanks!
No. It is not. If you want to scale your web app, you should use relative units like %, vw, or vh.
You can read more about it here.
And you can study how to view your web app on different sized viewports here.
No, pixels are not relative to screen size. If you want to use a relative suffix, use the % suffix. This will make the style relative to the parent element. For example, if the parent element is the <body> element, then width: 100% will make the element's width the size of the page.
No, a pixel does not scale. If you would like your html elements to scale, use vw (view width) and vh (view height) instead of px (pixels).
This varies from one device to another.
Px is in no way non-visually comparable to any relative units like vh, vw, % etc etc.
If you want to know what px means as exact as possible see here.
I was reading an article explaining the css properties width and max-width and came across this example:
img {
width: 100%;
max-width:700px;}
This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.
But isn't it unnecessary to add the width:100% here? Doesn't max-width:700px imply that the width will be 100% if the parent is less than 700px anyway?
First, width defines the width of a specific element while max-width define the maximum size the element is allowed to have.
Second, width:100% use the parent's width to calculate the current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Let's say you put width: 700px for an image. When you re-size your screen the image stays stably 700px. Let's say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile-friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images don't fit in the screen it will automatically re-size it to fit the screen.
As far I understand you want to get the image fit to the size of its parent container with the constraint of not exceeding the width of the image more than 700px.
Then I will say yes it is unnecessary to give "width: 100%;" either way default value for width will get selected i.e. "auto".
Because of this whenever your parent container will be smaller than 700px, your image will fit your container (since "width: auto;").
P.S.-Please refer "object-fit: contain" property of CSS, as that will also help.
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.
The main content column of my website is too wide for 1920x1080 resolution, so I'm trying to limit the size by using the max-width property, but when I do that the column is no longer centered. So every time I reduce the maximum width (let's say from 1600 to 1400px), the main content gets "chopped off" on the right side instead of being centered. Here's screenshot to demonstrate:
Note: I can't use margins for this because it will make the column too small on lower resolution devices.
Add the following CSS:
margin: 0 auto;
This sets the margin-left and margin-right properties to auto which centers a fixed width element (such as your max-width element).
Now, as for lower screen stuff, you should try to reset the margins on lower screen devices with a media query.
We have been provided a 1500px wide image that is a mockup of a website.
The website design is a fixed width design, where the design takes up the middle 990px of the image. So the 255px on either side of the image is just overhang to show how the site would expand to bigger viewports (ie, it wouldn't aside from some edge elements expanding to infinity).
What I would like to do is simulate this with the image (up as far as it will go). So if the viewport is 1500px, the image would start at 0,0.
If the viewport was 990px or less the image would start at 0,255px.
Anything in between would scale. So I would like to scale a negative margin from -255 to 0 depending on the width of the viewport.
Kind of like the opposite of
margin: 0 -10% 0 0;
This goes in the opposite direction to what I am thinking - as the viewport gets wider, the image migrates to the left instead of to the right.
In your stylesheet you could try using some responsive design techniques,..
#media screen and (max-width:1500px){
#yourContainer{margin-left:0;background-color:#afa;}
}
#media screen and (max-width:990px){
#yourContainer{margin-left:255px;background-color:#aaf;}
}
background color added for testing only ;)
This jsFiddle demonstrates this, just resize the browser window or the fiddle column width - http://jsfiddle.net/vs6uz/1/