get display: inline responsive

Question

I am currently building a portfolio and I want to get a display: inline element to work when the screen gets shorter.

I have the following code:

HTML

<div>
  <p> Hello there! </p>
</div>

CSS

div {
  margin: 80px;
}

div p {
  font-size: 70px;
  margin: 0;
  display: inline;
  background: orange;
  padding: 50px;
}

When I resize the width of the web browser, you can't read the text and there is no 'padding-right' and 'padding-left' on the p-element.

Does this answer your question? [Font size relative to the user's screen resolution?](https://stackoverflow.com/questions/11777598/font-size-relative-to-the-users-screen-resolution) — A. Meshu, Jan 13 '20 at 10:52
You can use media queries fi you want to make your site responsive — Sfili_81, Jan 13 '20 at 10:54
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Jan 13 '20 at 10:55
You should use display:inline-block; instead only inline. padding, margin don't work properly with inline element. — Hanif, Jan 13 '20 at 10:57
I can't use inline-block, because I want the background to appear just behind the text — L Minor, Jan 13 '20 at 11:00

score 1 · Answer 1 · answered Jan 13 '20 at 10:54

1

The background of the various line boxes is overlapping. To stop that you need to move the line boxes further apart.

You need to ensure the line-height is at least as big as the font-size and the padding-bottom and the padding-top.

line-height: 170px;

answered Jan 13 '20 at 10:54

Quentin

I get that, thanks! But how do I get the text in he middle of the background, if possible? – L Minor Jan 13 '20 at 10:58
@LMinor — Sounds like `display: inline` is the wrong approach if you want that – Quentin Jan 13 '20 at 10:58
But what can I use then? Maybe with ::before and ::after, but that is a bit harder. – L Minor Jan 13 '20 at 11:01

score 0 · Answer 2 · answered Jan 13 '20 at 10:58

0

Try this CSS styling in your responsive breakpoint:

the point is that you should control your text by "line-height" in responsive:

line-height: 2;
display: block;
text-align: center;

answered Jan 13 '20 at 10:58

Saeed Jamali

2 Answers2