Make text inside header responsive

Question

The following header looks fine on full-width; but once I start sizing down; there's a large gap to the left of the ipsom lorem text, where it should be filling in the full-width of the screen as it sized down. (First picture is full-width; second picture is what should happen when it sizes down).

Here is my code so far:

.header {
    background-color: #090c1a;
}

.header-inner {
  color: white;
  display: grid;
  max-width: 1180px;
  margin: 180px auto;
  grid-template-columns: 1fr minmax(50%, auto);
}

I've also created a codepen for convenience. https://codepen.io/tiotolstoy/pen/PoPzoQw

I'd like it to take up the full width instead of having padding to the right as it would with my current implementation. — , Apr 17 '20 at 23:04

score 0 · Answer 1 · answered Apr 17 '20 at 22:50

0

I don't think a grid is the best approach for what you described. I would do it with a "max-width: 590px" on the nested div inside the header-inner. like here - https://codepen.io/urich/pen/rNOLNZd

.header-inner {
  color: white;
  max-width: 1180px;
  margin: 180px auto;
}

.header-inner >div {
  max-width: 590px;
}

answered Apr 17 '20 at 22:50

Uri Chachick

432
2
6

This implementation collapses the left of the text though. The idea is for it to remain proportional as it scales down. And then eventually take up the full-width for mobile. – Apr 17 '20 at 23:05

score 0 · Answer 2 · answered Apr 17 '20 at 23:32

If you just want the mobile version's p element to take up full width, with just a tiny bit of padding to prevent text from touching the edge, change your CSS to this:

.header {
    background-color: #090c1a;
}

.header-inner {
  color: white;
  padding: .5rem;
}

You could also add a media query for the larger version to prevent the text from stretching the entire length of the div if you don't want the p element spread out too far on large screens, like this:

@media(min-width: 768px) {
  .header-inner {
    width: 50%;
  }
}

Play around with the percentage until you get the desired width on full screens.

Make text inside header responsive

2 Answers2