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.
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 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
When I give max-width of 1440px to a Header, and my whole screen is smaller than 1440px, in the browser this Header takes a width of 920px instead of 1440px.
Why does it do that ?
max-width is just the maximal width an element can have - there is no limit on how small it can be. For that you use min-width.
Try setting width as well as max-width to 1440px. If that doesn't work, add min-width too.
You say your whole screen in smaller than 1440px, it would be logical for the header to take a smaller width, since a width of 1440px is not possible..
Otherwise I don't understand your question very well.. Maybe take a look at padding and margins. Or share your code for a better answer.
I am working on forums and want to make it responsive.
I have kept container's width as 800px.
What should the min-width and max-width be in media queries so that it will work on all devices?
If you want your CSS layout to work on all devices use Fluid-Fluid-Fluid CSS layout.
Example:
Instead of writing:
width:800px;
you can use:
width:78%;
While I see the $row-width: emCalc(1000px); in _variables.css, I can't find where the small width is defined for mobile devices. I'm assuming it's just set to 100% but I'd like to play around with changing this.
Your assumption is correct : The row-width variable just sets the maximum width.
The width of the .row is always 100%
When it's a large screen, the width is constrained by the max-width variable, so it's by default 1000px
When it's a small screen (as a mobile device), the .row width is 100%.
I'm assuming it's just set to 100% but I'd like to play around with
changing this.
You may consider to change the breakpoint width, or using different structure (columns?).