Make the parent container proportionate to the text inside it

[sethrpabst]

So I have this black transparent box in my header. It’s got some text inside. When the text shrinks I want the the box to shrink as well, but I want it to shrink proportionately. The problem I’m running into is that when I shrink the text in my media queries, the width of the p tags doesn’t shrink with it. so This pushes the right side of its parent farther out making it disproportional. I’ve tried setting the p tags to inline but then the parent won’t shrink to fit the tags unless I set the parent to inline. And If I do that I need to use flexbox to stack the p tags on top of each other again, and I can’t use display: flex cause its already display: inline. Any Ideas? https://jsfiddle.net/0yLt58wc/1/

p.s here’s a visualization Right

here I hit a breakpoint and the font-size gets smaller you see how circle 1. shows that the text width is wider than the content. Well I need it to be the same size so the parent(circle 2.) shrinks with it. Display inline doesn’t do the job btw

[ronpat]

When you post a fiddle or codepen or “working page”, please include full URLs to relevent resources such as the images in this fiddle. They don’t even show up in your fiddle (in my browser). A test site would be better for everyone than trying to troubleshoot an incomplete fiddle.

I still choose not to fetch images from imgur and still recommend that you find another image repository.

I’m not positive that I understand the effect that you see as a problem, but “just in case”… change the units of measure (px and/or percent) for the paddings (and possibly margins) within the text box to rems so they, too, will change as the font size changes. Unitless line heights, if used, already adapt as-is and do not need to be changed. That should encourage the box to be more proportional as the font-size changes.

If there is more or if I am off base, please don’t hesitate to mention it again.

[PaulOB]

@sethrpabst

When the text shrinks I want the the box to shrink as well,

Then why did you fix the width of the box if you wanted it to shrink? Or am I misunderstanding the question.

The element is inline-block and will automatically stretch to its content so just don’t apply a width to it.

@media screen and (max-width: 1600px) {
	.header-info {
	font-size: 1.4rem;
	/*width: 392px; remove me */
	margin-left: 7%;
	}
}

However that seems too obvious to me so I guess you must mean something else

[TechnoBear]

Off Topic:

@sethrpabst: editing a post after people have replied is generally a bad idea, as the chances are those involved in the thread will not be alerted to the edit.

If you have additional information to offer, it is much better to create a new post, where it will not be overlooked.