Using a high resolution, everything is fine:
Using a resolution with smaller width, the black box remains too big:
I'd like the desired effect to be without the black regions crossed out in the picture below. Especially the effect on the left is desired - so, there are margins which should be at least X, but if there is more space, let them be wider (just like in the very first picture).
This is the code which makes up this page:
<!DOCTYPE html>
<html lang="pl">
<head>
<style>
html {
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
body {
background: #023E8A;
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
.main-page-hero {
flex-grow: 1;
display: grid;
grid-template-columns: 50% 50%;
}
.main-page-hero__czuj {
background: pink;
grid-row-start: 2;
grid-row-end: 6;
display: flex;
justify-content: center;
align-items: center;
}
.main-page-hero__czuj--big-highlighted {
background: black;
padding: 0 .3em;
margin: 0 1em;
font-size: 2em;
color: white;
text-align: center;
display: inline;
}
.main-page-hero__pupa {
background: green;
grid-row-start: 2;
grid-row-end: 6;
display: flex;
justify-content: center;
align-items: center;
}
.main-page-hero__pupa--big-highlighted {
background: black;
padding: 0 .3em;
font-size: 2em;
color: white;
display: inline;
}
.hero {
color: white;
}
</style>
</head>
<body>
<div class="main-page-hero">
<a href="czuj.html" title="Czuj" class="main-page-hero__czuj">
<div class="main-page-hero__czuj--big-highlighted"><span>Czujczujczuj czujczujczuj czujczujczuj czuj</span></div>
</a>
<a href="pupa.html" title="Pupa" class="main-page-hero__pupa">
<span class="main-page-hero__pupa--big-highlighted">Pupapupa pupapupa pupapupa pupa</span>
</a>
</div>
</body>
</html>Now, two questions.
The first question is about the reason of the width of the black rectangle. In the pink cell I put an additional span in order to understand why the black box is so wide. A browser inspection showed me that it's not the span (without a class) which is wide, it's the div. This div is of class main-page-hero__czuj--big-highlighted. It's an element of a flexbox main-page-hero__czuj. This is the only element of this flexbox. With these settings it should take as much place as it naturally takes, it shouldn't stretch. So a display: inline; should help not to stretch. But it doesn't.
The second questions is about how to reach the goal. I want this rectangle to be responsive, so no set width and height in pixels. I want this rectangle to be compact (without spaces between two lines of text). I want this rectangle and this text to be in the very center of the (pink/ green) cell.
I'm very aware it's something silly. But I've tried anything I knew could work and nothing worked exactly as I wanted.
