make div NOT scalable

Question

is there a way to make a div not scalable?

This is my css:

.card{
margin-left:5px;
width:19%;
float:left;
}

I want the div card to stay the same width even when you scale the browser.

Don't use a percentage in `width`. – Oriol Mar 26 '15 at 15:06 — Oriol, Mar 26 '15 at 15:06

score 0 · Answer 1 · answered Mar 26 '15 at 15:07

0

Use a percentage only if the container of your div element has a fixed width in pixels. Or, as Oriol told you, use a fixed width for your div

answered Mar 26 '15 at 15:07

n1kkou

3,026
2
19
30

score 0 · Answer 2 · answered Mar 26 '15 at 15:09

0

If you just set your width using px and not % it will max it to that width

Fiddle

answered Mar 26 '15 at 15:09

SaturnsEye

5,937
9
44
59

This does not work if the width should be always 1/5 of the screen width... I have the same problem with a sticky top menu having width:100%, but I don't want to have it scalable... – basZero Jul 10 '15 at 11:57

score 0 · Answer 3 · answered Mar 26 '15 at 15:09

The width property

specifies the content width of boxes.

It can have those values:

<length>: Specifies the width of the content area using a length unit.

<percentage>: Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.

auto: The width depends on the values of other properties.

You are using a percentage. Use a fixed length instead:

The format of a length value is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

score 0 · Answer 4 · answered Mar 15 '19 at 12:10

You could target children of a parent no to scale by css selectors, but you cant disable scaling as a property on a single element unfortunately.

#parent > span:not(:last-child){
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    display:block;
}

See this Answer

make div NOT scalable

4 Answers4