Tell us what’s happening:
Describe your issue in detail here.
Hi! i’m Ricardo I already finished the challenge but there’s something that bothers me, when I make the window smaller the text of the diferent sections overlaps and I don’t know how to fix it.
hope you can take a look at my code and get some help, any tips and recomendations are apreciated.
thank you in advance.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Edg/91.0.864.59
It’s because of the large horizontal padding of your #about section. A better way to give some space to the sides while keeping the content centered is to give the section a max-width in combination with margin: 0 auto:
#about {
max-width:90%;
margin:0 auto;
}
90% works well for small screens, but if that is too wide for your taste in full screen view, you can change that with a media query.
How narrow are you making that window? This is what I see for a width of 300px (keep in mind that even the smallest smartphone has at least a width of 320px):
I see, it’s because the welcome-section has a fixed height of 100vh. Since that’s one of the user stories, you can hardly change that, so the only options you have are
decrease the size and padding of the heading and the font size of the text for smaller viewports
put the content (or parts of the content) in a different section (maybe call it introduction)
just erase content until it fits
In the end, your real developer portfolio won’t be on codepen, you’ll learn different ways to present yourself, so I wouldn’t obsess over it too much, but if you’re in it for the exercise, maybe the clamp function to control the font size is something worth looking into:
Thank you very much for your time and help, I do get a little bit too obssesed with little things haha, I will try those options and look into the clamp function for sure.
