CODEWITHSUNDEEP
htmlcss
Holly
Holly

Reputation: 7752

Percentage padding not responding to browser width

I'd like to give some li's in my code padding that is responsive, which either increases or decreases depending on the browser width.

I thought this would be as simple as using padding: 0 5% but it doesn't work, that results in a padding of 7.063px which does not change if the browser increases or decreases in size.

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
}


li {
  display: inline-block;
  padding: 0 5%;
}
<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>

What am I missing, is this not how padding is supposed to work with percentages? How can I achieve responsive padding?

Upvotes: 2

Views: 27

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

The % is about parent not browser size

So try to use vw:

Working code

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
}


li {
  display: inline-block;
  padding: 0 5vw;
}
<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>

Other way is to set width to parent

See working code:

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
  width:80%;
}


li {
  display: inline-block;
  padding: 0 5%;
}
<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>

Upvotes: 2

Related Questions