Hi guys! I’m pretty new to all of this, and I’m having a little trouble with my portfolio project.
First of all, when I resize to xs the Portfolio section overlaps the about section.
Second, in a browser preview the About section looks just fine, but here in the Codepen it seems to be some kind of trouble. Despite the instructions in the CSS, it’s all white and the only visible thing is the <hr
Third, in the browser preview the email link at the bottom of the page is white, in the Codepen is blue, even if I specified the color in the CSS.
I’m working on it for some days now, and I think I could use a break. I’ve checked the whole code over and over, and I found nothing. I know it’s a lot to ask of you, but I’m pretty stuck right now and I could really use a hand. Thanks in advance for reading these lines.
Well, the portfolio doesn’t really overlap your about section, only its content. That is because your portfolio has a fixed height (700px) and content just wont fit in it and overflows. Solution is to give it auto height when breakpoint happens.
About section is white text on white background. Hard to see anything.
Email link gets its blue color from bootstrap. Works if you !important your custom rule. But that is not a good solution tho.
In general, when I replaced your bootstrap link and added it again through codepen (when you click on CSS options, you can add it), things looked correct (apart from the fixed height problems ofc). Codepen is meant to contain all the HTML between BODY tags. So if you just copy your stuff into it, it might conflict.
Oh, and one thing you didn’t mention, is that FCC logo background overlaps your name on small screens 
1 Like
First of all, thanks for the patience.
I did as you told me, and everything looks perfect now. I set a min-height of 700px for the portfolio section and then set the height value on auto. Now the content doesn’t overlap.
I solved the other two problems by cleaning the top section of the html and leaving only the <body. Then I added the external links both to Bootstrap and FontAwesome (the icons).
About the background overlapping, I knew that, I’m just unable to solve it at the moment. I was working on a solution that lets me apply a 5px blur filter to the image without affecting the content.
I tried using the ::before pseudo, assigning a differnt z-index to both the image and the content. It didn’t work. I don’t want to modify the image externally, so I’m considering a solid color background or a different image.
That said, you’ve been amazing, thank you so much!
EDIT: It worked 
I created a separate <div in the header, right before the container, and I gave it the .blur class. I applied the filter in CSS, with position: absolute. It looks better now, the bg image is blurred enough so that when the text overlaps it’s still nice and readable. Check it out, if you like, and tell me what you think
You can move the background around with background-position
Or use the image like a watermark with low opacity.
If you combine these options with blur, for sure you find something that you’d like.
1 Like