A little help with my portfolio

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

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.

thanks for the comment! I just tried that but the #about section, still overlaps with the #projects section

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

fcc

This is what I see in the editor view

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

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:

1 Like

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.

Get obsesssed all you like when it comes to experimenting and making things perfect - best way to learn.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.