Hey , I completed my 2nd challenge , Portfolio page.
I would love it if you guys take a look at it.
visit my portfolio here 
In the āportfolioā section, except the first image, I cannot see any other images. When the browser window is resized for small screen, the image in āabout meā section does not center but the text does.
are you using a phone? I canāt see that problemā¦ I tried on my mobile and the navigation bar is the only problem, It just gone as a list instead of inline. It just covers half of the screen , because it is fixed navbar. I canāt find a solution for thatā¦ other than that everything looks normal to meā¦
Following is the screenshot of what I am seeing on portfolio section (browser used is Chrome):
ohā¦ But it works fine for meā¦ Anyway Iām gonna change the photos and see if it works for youā¦
Just updated it with some random images, Can you check now please?
Hi @muhsin7majeed! Right off the bat itās a sharp looking portfolio, love the clean presentation, good use of whitespace. I really like the way you laid out your projects too! And I can see your updated photos on my end.
Thereās a few things though Iād consider changing, mostly aesthetics:
1.) The full width contact form on desktop views. To me a full width form is fine on mobile because youāve got limited space. But on a desktop itās just veryā¦wide looking. And I noticed it just keeps stretching to fill the width of the screen. Iām trying imagine what it would look like on a 1920px resolution (mine is 1600), you know what I mean? I would shrink it down for desktops and then at a certain break point let it go 100% width.
2.) The footer bar. Now this might partially be because Iāve seen the example portfolio project often enough, that I know that footer is the same exact color scheme/look. Which is totally fine if you want to use the same structure. But strictly from a design perspective its coloring is kind of jarring. Like you have this really nice pallet going of white, black, and the blues of your bio image and then we get down to the bottom and suddenly youāre introducing purple. Now the grey works, because you have grey in your menu, and also it works well with white and black. I would either nix the purple for one of the blues youāre using already or if you really like it, then maybe add that purple as a small accent color somewhere else along the page.
3.) The mobile navigation. Now I know you mentioned you were having problems with this area and my suggestion is to look into working in a collapsing/expanding hamburger style menu. Itās pretty simple to set up with a touch of JS or jQuery:
4.) I noticed thereās a couple things going on when viewing in the mobile sizes:
Your bio pic is being pushed off to the side and youāre getting a horizontal scroll from something on the page pushing the width beyond the viewport resolution. You might not see the scroll bar on mobile (my screenshot is with Chrome dev tools) but I can tell you on my phone (Galaxy Core Prime 320 x 534) you can definitely scroll sideways.
Thereās also a bit of clipping for your project titles:
It looks like that specific issue starts around 430px. Iāve seen that particular problem with other Bootstrap built projects. Sadly I canāt advise you on how to fix it as I havenāt learned the framework yet. Normally Iād just suggest adding a media query break point near that resolution and either expand the width of the columns or change the number of columns in general.
On a side note, your instagram is awesome 
1 Like
Yes, images are visible now.
1 Like
Thanks for the described feedback broā¦ I really appreciate that.
I tried a lot on that navbar , but couldnāt find a solution 
lemme take a look at the collapsing navbar.
Iām new to web development 
is there any way to make whole page responsible to mobile ? or I have to edit everything
btw yeah, I actually copied that footer color from that example 
Iāll change it.
Again thank you
No problem! Again I wish I could help you out more with Bootstrap but my knowledge of it is exceedingly limited. But, I took a quick look over this tutorial: https://blog.revillweb.com/bootstrap-tutorial-a-responsive-design-tutorial-with-twitter-bootstrap-3-cb6445c1e586
And it looks like there are specific classes built in that you can use that automatically add collapsible navigation. So you might be able to get that working quicker than from the previous guide I linked.
From what I do know about Bootstrap, it was made with responsive design in mind, which leads me to believe thereās gotta be some combination of classes you can use already there. Itās just a matter of figuring out what and where. The only way I personally know how to do it is from scratch with plain old HTML/CSS and yeah youād have to rewrite and add a lot of stuff.
You might have some luck with Flexbox, maybe not for the entire page if you donāt want, but you could try it in a few sections (like your project area for example).
I would definitely say to try and find some good Bootstrap tutorials that specifically breakdown how to use the responsive column system. Cause I know itās capable of it, I just donāt know how.
1 Like
Again thanks for the help broā¦ I saw couple of w3school links on bootstrap navbar, i was bit busy , Will check them and Iāll let you know.
1 Like
Hey guys, i am almost finished with my portfolio page. I looked everywhere, and i canāt seem to find the answers, therefore, im asking for your help, if you can/know
Problems:
- photos are not loaded when i load webpage on my phone, i have no idea why? (on the other hand, on my tribute page, photos loaded perfectly)
- when i load webpage on my cellphone, page is not fixed. I have to swipe left and right just to see the full content of the page?
- something is wrong with breakpoints in āaboutā section, photo isnāt moving, and text goes all the way to the left side of the screen.
Can somebody help me? thank you so much
Happy coding
Hi Mita, I took a brief look at your project and I have some hopefully helpful feedback for some of your issues:
1.) Iām guessing thereās something up with the url links to your dropbox hosted photos. Iām not sure what exactly, Iāve never hosted photos via DB but I know if I try to visit the link to view the image directly itās giving me a 403 error. Which after looking that up is a forbidden access error. So my second guess is there might be a privacy setting issue with the files themselves. Not sure how to fix that though.
2.) & 3.) I noticed a horizontal scroll as well on your mobile views, itās not a terribly huge one, but I did come across two things in your code:
First, you have this tiny typo in your HTML:
<!-- ABOUT STARTS HERE -->
<div classs="container">
The other thing is you added right padding to your #about-content element, but then never got rid of it for a smaller screen size. BTW Iād get rid of one of those two right paddings in general because there should be only one of that particular instance used at one time.
#about-content {
padding-top: 50px;
padding-left: 30px;
padding-right: 100px; /* nix one of these */
padding-right: 150px; /* nix one of these */
So those styles are still effecting that element as we go down in size.
Iād suggest adding a media query break-point at 991px (that seems to be the break-point set by Bootstrap where your portfolio columns go into a single column). You can do something like this:
@media screen and (max-width: 991px) {
#about-content{
padding-right: 30px;
}
}
Iāve just matched the left padding here so itāll be spaced evenly on both sides.
As for that horizontal scroll, that Iāve seen that happen with a lot of Bootstrap built projects here and Iām not sure exactly where it comes from. In my own coding experience, usually when a horizontal scroll appears itās either a width or margin issue where something is being pushed out beyond the viewportās max width.
But start with that stuff and we can see if that clears anything up.
1 Like
I think I fixed those problems. 
Everything is flexible now, only problem Iām facing is thhe huuuuge space between āportfolioā and ācontactā . i donāt think it is a problem though, Can you check the page and see if
everything looks good?
1 Like
It looks great!! Well done!
The collapsing menu is perfect, everything is centered really nicely in mobile views. And you even got rid of that horizontal scroll!
My only additional tweak would be that full width contact form. Here, you donāt have to use it in the end but try it out and see how you like it:
form{
width: 100%;
max-width: 750px;
margin: 0 auto;
}
I donāt know if youāve ever messed around with max-widths but theyāre pretty great for responsive designs. Basically weāre telling the element, yeah you can be 100% the width of your container, but I only want you to go out this far. Whatās nice is on smaller viewports (in this case smaller than 750px) it will shrink down as it should.
That margin: 0 auto; is just there to recenter the form in the middle of the page.
I picked a random max-width number by the way, so feel free to play around with the size.
That looks like itās coming from:
#portfolio{
margin-top:100px;
margin-bottom:1000px; /* <--- here */
}
Iād either get rid of that bottom margin entirely or at the very least decrease it quite a bit. Then you should be good to go there.
1 Like
you are the man 
Didnāt see that 100px , that was the problemā¦ Get rid of that top and bottom margins, Now it looks good, thanks for that 
I also adjusted form width.
Overall you helped me a lot 
Thank you broā¦ 
you really helped me
1 Like
Lol well, woman
No problem! Iām glad I could help you work out the issues. And honestly you did such a great job on it in the first place that narrowing down any bugs was way easier to do
Congratz on an awesome portfolio!!
1 Like
oh! * awkward * well, How you doinā (joey.jpg) 
Thanks. 
1 Like
itās no big deal, I realize my username is pretty ambiguous. Besides my best female friend and I have been calling each other dude and āHey man check this out!ā since high school. So itās all good!
1 Like
phewā¦
lolā¦
anyway, it was nice talking to you, see you on my next trouble 
#peace
1 Like