Responsive Design Challenges

Hey everyone,

So, I dove into building my portfolio website a couple of months back. Admittedly, I might’ve gone overboard with the whole position: absolute thing, and I started coding on the laptop view first – classic rookie move, I guess!

Here’s what’s giving me a headache: When my site isn’t fullscreen and I vertically shrink it, the content starts to overlap like crazy. I’ve got a hunch that my overuse of position: absolute might be the reason.

If anyone’s up for a quick look at my GitHub repo, could you let me know if my suspicions about position: absolute are on point? Any tips on how to fix this mess and improve the layout would be greatly appreciated. When I remove all of the position: absolute, things look so scattered, it’s almost like I basically have to completely restart.

Huge thanks in advance for any insights you can throw my way!

Hey @Zuko, I’m trying to look at your page but I am getting the following JS error in the console and no content (other than your pic) is loading.

Uncaught ReferenceError: applyAnimation is not defined

No, it’s still not working for me. Still getting that same error. I’m not seeing any recent changes in your repo. And I’m still seeing the bug in your index.html that is causing this.

I think I’m going to agree with you there as far as the header nav is concerned. I don’t see a need to set absolute positioning on it. It’s the first element in your body so it will already be at the top of the page. I removed it and the menu still seems to work just fine (I had to make a few other minor adjustments, such as the background color and getting rid of the width: 90%). And I definitely don’t see a need to use absolute positioning on .navbar-name and .oval for widths under 32rem. I would recommend you redo your CSS for the header to get rid of all absolute positioning.

That wasn’t where the bug was.

The bug is here:

<script src="/script.js"></script>

You either need to remove the forward slash or add a dot before it. Do you know why?

Ahhh I see, the forward slash is for when it is in a folder so in this case it is unnecessary, must have put it there by mistake. Like say you have a folder named images you would do images/random-image.jpg

I totally agree, working on that now and will push all my changes to my repo. I know that won’t fix all my issues but it’s a start

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