Making my portfolio project fun and responsive minus the issues

Making my portfolio project fun and responsive minus the issues
0

#1

Hi everyone,

Here’s a link to my Portfolio project’s codepen in editor view

https://codepen.io/leyaabebe/pen/JJodJg

and debug mode.

https://s.codepen.io/leyaabebe/debug/JJodJg/RBrOJeROZjvM

It looks best in debug mode because I’m making use of vw (view-width) and vh (view-height) more than percentages or pixels.

I was having issues with creating a responsive navigation that highlighted the section you are one when you get to it, and getting rid of that white left and right border to my page. I’m using bootstrap and container-fluid should make the content flush to the margins. Does anyone know how to fix this?

I think I might go back in to add more info and to create a form someone can submit as well.

In the meantime, I would really love any feedback on its design, code, or help with either of my issues!


#2

You’ve got a good start here.
Like the color scheme.
As for the white space try chaning color of body with css.
Are you sure all your content is wraped within the container-fluid?
Responsiveness is an issue.
As is the huge size of some of the h elements.
I would suggest you take a closer look at responsive design.
Try some bootstrap tutorials or flexbox.
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
https://thenewboston.com/videos.php?cat=43&video=18831


#3

Thank you!

I’ll check again if the content is wrapped within the container-fluid. I actually chose to make the h elements much larger as more of a design choice.

Could you elaborate more about how the responsiveness is an issue?

In the meantime, I’ll look at the links you shared.


#4

Also, did you look at the debug view or the editor codepen? I’m not sure why they look so different…


#5

When I state responsiveness is an issue, I mean that your h elements are overlapping each other or are overlapping other content.
I tried to view in debug mode, but your link says that it has expired.

What browsers are you using?
Have you used develpoer tools to view pen in responsive mode?


#6

I had the same issue with container fluid making my nav bar pulled to the right by a couple of pixels. I still can’t figure out why it does that though. taking out container fluid made it better, but leaves me without responsiveness that I want. I also noticed that you were using a different bootstrap (3.3) than is provided by codepen’s quicklinks (4.0), but not sure what the differences are.
looks really good though!

I’m really new to all this, but I couldn’t figure out what Learning4Earnings meant with the responsiveness issue. everything looked good in chrome as I resized the page.


#7

so here’s an example i was able to get with yours where the text doesn’t really look right


#8

I see what you mean now, and I didn’t know the debug mode link would expire. It basically looks much better when it takes up the full page with no code visible. I realize that I created queries for changes in width but not in height. On my end, when I change the width, everything decreases in size fairly gradually and there isn’t overlap.

I’m using chrome and safari. I was using the developer tools from chrome when I was looking at my site.


#9

Thanks for noting that. The different bootstrap versions might be an issue. I’ll see if I can resolve that. And wow, thought I accounted for changes in width better. Hmm, I might have to start this project over.