When working with multiple resolutions, the "em" based approach seems a good way to code your css file. However, if you have say two resolutions 480x800 & 540x960, then the width ratio ( 540/480 = 112.5% ) is NOT same as height ratio ( 960/800 = 120% ).
So, if I have an em font size = 112.5% for moving from lower resolution to higher, the width seems perfectly aligned to new resolution but height ( which expects font-size of 120% ) seems to fall short and therefore there is a white blank space created at the bottom after rendering all elements for the page.
Any solution to this problem would be great help.
em is a unit of choice for fonts, not so much for element dimensions. With it evaluating to element's font-size, it's simply not reasonable to be setting widths using this unit.
You may be trying to refer to a vertical rhythm, which is a concept of maintaining text readability and should not be confused with the rest of the page layout.
For aesthetically pleasing rendering under different resolutions, you should look into fluid layouts - try playing with the browser width on that page. As you can see, the content flow is altered to make best use of space available, however the font size/line-height are not adjusted since the two techniques are independently implemented.
Related
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
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
Basically, on one of the pages of my website, I have a div with 60% width, in which all of my content is stored.
My problem is, when I try the site on different, lower resolution monitors, Some of the content in the div ends up being cut out.
I don't want to increase the width, but I have no ideas on how to fix the issue without doing so.
You can use media queries to change the style rules based on factors like device-width and resolution:
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example, you could adjust the font-size in the div based on the size of the viewport
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.
Should i keep #wrapper{ width:100%} in print css? because on screen my design is a fixed width design 960 px. but there are so many paper type and sizes in the world and anybody can take print on any size paper, bigger and smaller.
So if in print css i do not specify relative width then i think print of page will cut of from right size if user will take print on the paper size which can smaller or larger width than my site #wrapper width (960px). then it can create problem.
http://www.dpandi.com/paper/index.html
printer also leave some margin when printing.
So should keep everything is relative size in print css?
update:
And should i also change float left or right to float:none in print css?
Yes, you should. If you stick to a definite pixel size, you could even run into a situation where different visitors could see different amounts of the page cut off because of their printer DPI and/or browser. You might want to also consider adjusting your font sizes to be relative as well (using em or %).
Word of caution: make sure all your elements flow correctly when you switch over to a relative width, or you could have other parts of your content cut off or pushed into strange places.
The browsers tend to translate pixels to a similiar size before sending to printer, so it will look similar to what you see on screen. It will not send the pixel size to the printer.