Screen Resolution for all screens

Question

1.89/5 (3 votes)

See more:

I have a web form with textboxes, validations and other controls. How can I get the web page to keep its size no matter what resolution it is? Right now I use tables to keep everything aligned. Is there a better way? Thanks.

Posted 16-Jul-14 8:32am

Computer Wiz99

Add a Solution

Comments

Kornfeld Eliyahu Peter 16-Jul-14 14:39pm

Tables are probably the worst elements to design a web page...
Search for 'responsive web design'.

Computer Wiz99 16-Jul-14 14:44pm

Ok. Thanks. I just use them to get things I need in line. But I will look into what you gave me.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-07-16T09:05:00

Solution 1

You cannot and should not. The rendering of the Web page is really defined not by screen "resolution" (which is wrong term, you probably meant just the size of the screen in pixels; resolution is something totally different, measured in lines/mm or lines/inch, dots/mm, dots/inch, the ability to "resolve" detail of certain absolute size). If depends on the size of the browser window, which can be changed by the user anytime.

You should better embrace the concept of liquid, fluid and elastic design. Please see my past answers:
Webpage screen resolution (Cross Browser\Cross Platform) problem[^],
To Get Screen resolution[^].

—SA

Posted 16-Jul-14 9:05am

Sergey Alexandrovich Kryukov

Comments

Maciej Los 16-Jul-14 15:53pm

+5!

Sergey Alexandrovich Kryukov 16-Jul-14 19:47pm

Thank you, Maciej.
—SA

Abhinav Gauniyal 16-Jul-14 23:19pm

Another point I would like to make is , concept of liquid, fluid and elastic design is more general or kind of ideal to apply into designs , one does starts with that in mind and ends up with a heavily tweaked model of it. The best way is to combine major industry breakpoints for devices (2-3 are sufficient) , build up from mobile-first approach and then apply fluid design b/w those breakpoints. A mix of everything ;)

Abhinav Gauniyal · Accepted Answer · 2014-07-16T17:03:00

Apart from what @SA has mentioned , I would say learn about flex box. By the time you would grasp the details of responsive design practices , learn flex box next and it would be supported in all major browsers.

For now here are stats : Can I use : Flex Box[^]
It already has 68.36% support and 14.29% partial support for browsers and by including fallback techniques , you can use it in production environments too.And the best part is , once you've mastered it , you'll no longer stressing about widths and heights of your webpages.

Here's a detailed version that would help you : A-guide-to-flexbox[^]

Another thing I would like to point out is , WDesigners currently is moving away from fluidic/liquid design and instead adopting the Show-What's-Necessary approach. For example , fluidic design deals with arranging all elements of a desktop website to a small screen device , but for latter approach , it includes hiding unnecessary elements and showing only those which are necessary. Designers can choose to show specific elements on smaller screen and hide them on bigger ones and vice-versa. At the end , you'll end up with 2-3 breakpoints + fluidic design approach in b/w them + an UX consideration of showing necessary elements.