I was given a Figma design of a webpage. The Figma page width was 1825px. The width of my laptop is 1080px. Suppose a text in Figma page has font-size 20px. How do I convert it to my laptop so that the ratio is maintained?
I can't use a percentage because I'm using flexbox. And when I try using percentage what it does is takes the percentage of its parent container rather than the entire body.
I also tried using VW. Calculated the view width based on the 1825px breakpoint and implemented that. The issue is that the pixels are getting distorted in this approach.
Also, This answer Typography using VW got lots of upvotes means VW works, Then why am I facing the issue?
I'm using react and I don't want any javascript solution. Is there any way to solve this using CSS only?
Are you sure you need to do it? Font size usually changes when breakpoint is reached.
But if you really need to do it, you may set the font-size based on viewport width.
So if 20px font-size on 1825px width is desired ratio then you need to set font-size to 0,01vw to preserve the ratio across all screen sizes.
The easiest way would be to use media queries.
https://developer.mozilla.org/es/docs/CSS/Media_queries
You can also try other units like vw (view width), rem (relative to the font size of the root element), etc...
https://www.w3schools.com/cssref/css_units.asp
What I'm trying to do is same margin between div container on different resolution. I'm using vh as a margin unit between container but it's not responsive like 2vh is ok for 1000px width and greater resolution but it looks bigger between 600px to 999px width resolution . So I opted to use media query but I think this is not efficient is there other way to make the margin looks the same on different resolution without using media query?
Sometimes vh doesn't work as expected. You could try to use percentages but you have to understand it is very hard to get it similar without media queries because of the different ratios in different screens. If you would like it to be a set amount of pixels you can use min-height and max-height in a margin container.
I am working on an ASP.NET MVC application which uses Bootstrap for layout of the views. The main browser that we support is IE 10+. I have a few data fields that I am using multiline Textareas for. I am trying to achieve a simple behavior; I want to give a certain maximum width for the Textareas (say 700px, even if window is wider), but have the width reduce down for small window sizes.
I set up a special class in my Site.css file for them. But it seems like the only way that I can get the Textareas to use the full 700px width is to use the CSS width property. But when using width, the width does not reduce for narrower window sizes. If I use max-width, the initial size is smaller even for large windows. Isn't there any way to achive my desired effect?
I ended up using width with a percentage of 70% (rather than 700px). That gave me the size I wanted with larger screens. Then, I put in a min-width value of 300px to give me (close to) 100% on smaller screens.
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.
I am just starting with Bootstrap and going through docs. Right now, seems very confusing and have some queries as follows:
In the Grid Options table, why the container width is always less than device width, why not equal to device width for e.g.Small devices Tablets (≥768px).
How the width 750px is determined, why not 743px or 755px or any other size. How did they determine that 750px as container width.
As given, bootstrap scales up to 12 columns with gutter between columns and each column width is
~62px and gutter is 30px (15px on each side) therefore
(12(cols)*62px ) + (11(gutters) * 15(width)) equals to 909px instead of the given 750px container width. Why ?
This is all is very confusing to me. Could someone plz show how the container widths are calculated for different breakpoints and why the container width is not equal to device width ?
Thanks
dk
The Bootstrap .container is used as a centered container, if you want full-width on all devices use .container-fluid
The 62px is actually 62.5px at the small breakpoint. 62.5 x 12 = 750px, and this includes the 15px padding around each column. The gutter is within the column since padding is used (as opposed to a margin where the gutter would be outside the column).
Here's a nice visual demo: http://www.codeply.com/go/Sul9kw8Kne
Aside from the container width, take a look at this article about the BS3 grid
First of, If you want a container to equal to device width use
container-fluid instead of container
For the Grid system there are two concepts
Boxed layout (.container provide this)
wide layout (.container-fluid provide this)
in bootstarp there is no pixels for grid every thing in in percentage (%) only.
all media quire break points are setup through bootstartp it self you may change those values through bootstrap customizer http://getbootstrap.com/customize/.