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
I'm using cordova and I have some absolute positioned elements that behave different depending on device resolution. Some text positioned over other elements if the screen is larger, for example.
What do you think is the best css unit to use for distances and position?
Do you have another approach to this kind of problem?
In general I always use rem unless I specify sizes in percent of parent elements. This way you have a single reference for sizes, which helps me mentally relate one thing to another. Also, it all stays consistent when the user zooms.
If you need to make sure certain text has enough space or is abbreviated correctly, it's sometimes necessary to use JavaScript in order to resize based on available and needed space. A common technique is to render a simplified interface if showing on a small resolution. You can detect events like window resize, document load, etc.
If you need a more tailored answer, please make a jsfiddle to illustrate your problem.
Percent should do the job! It will scale according to the resolution.
Or maybe vm / vh is what you're looking for.
http://snook.ca/archives/html_and_css/vm-vh-units
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
This is a general question for you web-dev folks out there. I've seen lots of CSS out there that has a very specific pixel or percentage count for css elements like "padding" and "height", etc. Experienced web developers seem to really nail the positioning of their content. I find for doing something as simple as centring a element into the flat middle of my screen, it takes me lots of testing with different px or % values for "padding-left" or "height" in my styles before I get it right, and it just feels clumsy.
So I was wondering, is there some rule of thumb, or guideline, that you all follow for choosing px or % values when building your web pages?
Using percentages corresponds to fluid designs, the web page thus created will be responsive in nature. Using pixels is as if you are using fixed values, the web page won't be responsive. this design pattern will be suitable to web pages which are intended to be kept at a fixed size. For responsive design it's good to use bootstrap, as they have done most of the handling of css for you (indeed for different screen sizes and resolutions), we just need to use the appropriate css classes as per our need. Doing so, the web page will be responsive.
It's recommended to use responsive design, go for % values so that the web page doesn't break for different screen sizes and resolutions.
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
I am using Materialize CSS to create a homepage. I usually use one container to hold everything. This time, I used different containers to hold different elements, for instance, one for the navigation bar, one for the carousel, and so on. There are no containers within containers.
Is this good to do? What is the best practice with containers?
Some times using multiple containers is ok and even required. For example think of page with multiple full width element, which contains different background color and centered content. These full width elements could be <section>s and centered content could be containers.
You have to think is your solution logical. If you can figure reason for your element to have it's own container, then it is ok to use. If you provide link to your work, i could give my opinion.
As clear answer to your question, i think it is good to use multiple containers if page structure requires. Container is just one element among the others.
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 9 years ago.
Improve this question
I know responsive units like rem were introduced to make a page properly zoomable, but I wonder if there is any other use case, if modern browsers zoom px-based values, too? They even treat px-based media queries responsively nowadays: if I zoom into a responsive website far enough, it will switch to the mobile layout.
Thank you.
EDIT:
I only know one use case myself: If you want users to set the font-size dynamically on a page (e.g. like in a ebook reader app something like this).
rem was not introduced to make a page "properly zoomable", it was introduced to allow the sizes of things to be set relative to the base font size.
Having content scale based around the font size the user is comfortable reading is useful.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to figure out for hourssssssss how this website does this. If you go to [] and resize your browser screen, you'll see that the main content container in the middle gets smaller as your browser size gets smaller. How does it work?
I'm trying to do something similar with a wordpress website I am building.
Thank you,
AJ
All of the stacked elements in the main column have a width of 65%, which refers to a proportion of their parent element. In this case, that's the entire width of the viewport. They'll resize to their min-width, which is set to 700px, and also their max-width, which is at 1920px. Pretty straight-forward CSS.
Get familiar with Firebug and/or Chrome and Safari's developer toolbars. They're indispensable for anyone working with websites.
I believe you are referring to it being Responsive. It likely uses CSS #media queries to change the sites width depending on the resolution of the browser.
You can find more information here: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Also, your site is not a great example of it, see better examples here:
http://mediaqueri.es/
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 3 years ago.
Improve this question
I've been using pixel defined width and height dimensions for my HTML elements so far. This works out pretty fine except when you're faced with bigger screens.
What are the pros and cons of using percentages as your standard?
P.S.Also how do you handle the size of fonts?
Good article to read on this topic.
Fixed Vs Fluid Vs Elastic layouts
Pros
It is the easiest way to the same height.
It avoids using float or position:absolute for purposes for which they were not intended.
It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.
Cons
It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
To create a colspan or rowspan effect requires nesting one table inside another.
It encourages people to build grid layouts rather than taking a more flexible approach.
If you've defined maximum and minimum heights, there aren't many disadvantages other than the constant worry that if your new posted content will look good on every resolution. And there is still the problem of percentage rounding and overlapping margins... Stubbornella is known to find solutions to the most of the problems that come with flexible layouts (see the demo page) and also there is this The Perfect 3 Column Liquid Layout by Matthew James Taylor.