-1

Am new to this forum. Actually I can horizontally increase all elements width by putting their width in percentage(%). So that in a normal wide screen the pages are rich with label and its associated textboxes, dropdowns, calendar controls and textareas.

But major Clients have huge Desktop Monitors so that the textbox dropdowns normal height is 22px and in that huge screens its is not at all sufficient. Please help me.

closed as off-topic by JonW Mar 18 '14 at 9:14

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

1

The correct way

Do not increase the text size for these people. Let people with large screens zoom in manually. Use em's instead of px, em is a unit relative to the parent or body font size. This article, CSS Font-Size: em vs. px vs. pt vs. percent, has a good reference about units and it usage. Setting ems allows most modern browsers to scale the font size appropriately as the end user zooms in with ctrl + +

The transform method

This method is only compatible with recent browsers (see the reference on can I use about scale )

    body {
      -webkit-transform: scale(2);
      -moz-transform:    scale(2)
      -ms-transform:    scale(2);
      -o-transform:      scale(2);
      transform: scale(2);

      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }

I posted a code on jsfiddle that you can check here, I use scale(2) which equals to 200%.

The non standard method

try the zoom property on your body in CSS. This method is not a standard and support may be dropped, however, for now it is supported by most modern browsers.

To test support in your browser of choice, follow this link, also on fiddle: and measure the size of the image

body {
  zoom: 200%;
}

Check this reference about zoom.

  • I dont think we can use 'em' instead of '%'. But scale body will try .. – vargis Mar 18 '14 at 8:08
  • What about responsive design and defining font size in % – Hemchandra Mar 18 '14 at 10:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.