MyPortfolio (90% done, but having problems with scaling) help?

Code Feedback
1

So, I feel like I am closing in on finishing this thing and I am fairly happy with it but would like people’s criticism.

At any rate, the one big problem I am having and am unable to figure out is why everything goes haywire when I shrink down my browser. I figured it would do that for my portfolio section so I added in some bootstrap grid stuff to sort that out but the NAV bar does it too, I don’t see what I am doing wrong here…

I would appreciate peoples thoughts. Thank you.

  • ALSO -

Please view it from Codepen site, like I said scaled down looks awful but full-version is best. And I cant figure out why my navbar toggle switch isnt expanding when I click it, what gives?

2

Good presentation. Did u try out container in bootstrap? Give a try for all the sections seperately in div element including ur pic. Even ur pic should be seperate container. This would solve major of ur prob I guess. I didnt check ur code though. But I feel this is going to solve ur prob. :slight_smile:

3

Good design, so about the navbar issues:

  • You aren’t actually using the bootstrap js plugin, go to “Settings” on the top (gear icon) > “Javascript” tab > in “Add External JavaScript” at the bottom it says Quick-Add choose Bootstrap.

  • In this line:
    <ul class="nav navbar-nav nav-pills navbar-right">
    Delete
    nav-pills navbar-right
    so you only have
    <ul class="nav navbar-nav">

  • This div has 2 id’s, that won’t help, I suggest you put the second as a class if you want to keep referencing to it:
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list">

4

About responsiveness (scaling), try to redo the grid, I’m not saying to redo all, save a copy, create a grid system of the layout you want, and put the content back on it, I think you’ve tried to design the grid system and layout with the whole content and that can be overwhelming. If you need any help tell me :wink:

5

Thanks guys, im trying to implement some of your suggestions now, so for anyone newly looking at this post keep that in mind as its going to look all out of order for a little bit thanks.

6

So I implemented some of your suggestions, and it is getting better for sure. But I am running into a new issue, that is this:

When I downsize the browser, the “About” section, the text collapses onto the image to its left. How do I make sure they do not overlap?

7

I don’t have much time, so instead of giving you a solution for a specific problem, I’ll give you a general workflow to solve any possible issue that may arise.

With that tool, on the right side you will have various panels to control the properties of the element, and so experiment, change properties around, if it works for you copy what you have changed into your pen.
That and google a lot and you’ll be able to solve almost any issue by yourself. :grinning:

Good luck!