[Solved] How to a CSS rectangle down with the text?

My portfolio page has a white front that the text is on. It works well on desktop, however the text overflows the white box on mobile. I currently have a px size set, but I can’t figure out how to get it relative to the text. I’ve tried setting a % variable to the size, but that was a disaster.

Here is the CSS:

.front {
  max-width: 70%;
  height: 470px;
  margin: 30px auto 0 auto;
  border-radius: 15px;
  background-color: white;
}

The area in question is the height: 470px;.

If you want, the HTML is here:

https://github.com/GiacomoLaw/giacomolaw.github.io/blob/master/index.html

Thanks in advance!

Try setting the display. IE:

.front {
  display: inline-block;
  max-width: 70%;
  height: 470px;
  margin: 30px auto 0 auto;
  border-radius: 15px;
  background-color: white;
}

You can find out more about the display tag here:
http://www.w3schools.com/cssref/pr_class_display.asp

No good, it shoved the page to the left and broke it.

Ok, post a link to your codepen and I will try to figure it out.

1 Like

Here is the codepen: http://codepen.io/GiacomoLaw/pen/KadwWj

Here is the GitHub repo: https://github.com/GiacomoLaw/giacomolaw.github.io

Ok I simply removed the height tag and now the text will alway stay inside the box.

.front {
  max-width: 70%;
  margin: 30px auto 0 auto;
  border-radius: 15px;
  background-color: white;
}
1 Like

Oh, wow! Didn’t realise it would be that simple, thank you so much!

No problem glade I could help. BTW it’s a good rule of thumb that you avoid setting a static height when your trying to make a site mobile friendly. Just use min-height when you need it to remain a certain height on a large screen.

1 Like