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
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