How Do You Increase Element Width As You Decrease The Window Size?

I'm coding a website to fit both desktop and mobile, and of course the initial thought is to use a percentage width and then setup a mobile CSS stylesheet that changes the element

Solution 1:

You want this:

• 100% width when window is less than 700px wide.
• 50% width when window is more than 1000px wide.

Then, you decided to reduce the percentage linearly between 700px and 1000px.

However, there is a problem: when the percentage is resolved, the used width becomes

As you can see, increasing the width of the window reduces the width of the section, producing a very weird effect.

Let me propose a different approach:

• 100% width when window is less than 700px wide.
• 100% = 700px width when window is 700px wide.
• 700px width when window is between 700px and 1400px wide.
• 50% = 700px width when window is 1400px wide.
• 50% width when window is more than 1400px wide.

That is, use a constant width of 700px, and clamp it with percentages:

width: 700px;
min-width: 50%;
max-width: 100%;

section {
  width: 700px;
  min-width: 50%;
  max-width: 100%;
  margin: 0 auto;
}
section:before {
  content: '';
  display: block;
  height: 100px;
  background-color: olivedrab;
}

<section><p>This olive green box will be a reasonable size on a big monitor (50% of the screen), and will fill the screen (100%) if it gets smaller than 700px (i.e. mobile).</p><p>The transition is smooth. Go ahead, try resizing the window and see how pretty!</p><p>This is not as "clunky" as setting a CSS mobile screen profile, but uses jQuery which isn't always a good idea.</p></section>

Solution 2:

You can use CSS transitions for the effect you're after.

transition: width 1s ease;

See your amended fiddle http://jsfiddle.net/3wtfenk2/

No javascript used.