Hamed_Portfolio Project Feedback

Hello Camper,
Wish u a good day .
It’s good to hear a feedback from you to my second project


Have a nice day!

1 Like

It looks like you have a typo in your codepen url. You have ‘codepen1.io’… instead of ‘codepen.io’…

I just copy the url and it doesn’t work !!try now @writhisdown

now it’s working! :ok_hand:t5:

I will be glad if I hear from u feedback :smiley:

Great start!

Looks like your “portfolio” section is a bit off center. When resizing the screen, your portfolio images start to get cut off. Also maybe think about adding a menu button in place of your navigation when the screen gets smaller.

Overall, I think you have a good grasp of things!

@writhisdown thank you for your feedback but for the problem of images responsive am using the class img-responsive though it doesn’t apply on small screen !

I think I see what’s happening here.

You have specify what you want your layout to do when the screen size changes. Bootstrap uses 5 different breakpoints that you can use, however you want, to make your layout fluid. They are col-xs-#, col-sm-#, col-md-#, col-lg-#, col-xl-#, or extra small, small, medium, large, and extra large respectively. So each div (nested within a parent div with the class "row) would get multiple classes for each breakpoint

ex.

If I’m understanding what you want to do, It also looks like you’re using more divs than you need. I would try something like this:

 <div class="col-sm-12 col-md-6 col-lg-4">
      <img src="#" class="img-fluid">
 </div>

 <div class="col-sm-12 col-md-6 col-lg-8">
      <img src="#" class="img-fluid">
 </div>

 <div class="col-sm-12 col-md-6 col-lg-4">
      <img src="#" class="img-fluid">
 </div>

You can use as many or as little of the breakpoints as you like, so play around with it until meets your liking.

From a design standpoint, I would left align you “portfolio” h3 element to be consistent with the rest of your layout. I think it would make for a better user experience. However, if you prefer it to be centered, try using the bootstrap class “text-center”, or add (text-align: center;} to your css.

Hope that helps!

<div class="row">
 <div class="col-sm-12 col-md-6 col-lg-4">
      <img src="#" class="img-fluid">
 </div>

 <div class="col-sm-12 col-md-6 col-lg-8">
      <img src="#" class="img-fluid">
 </div>

 <div class="col-sm-12 col-md-6 col-lg-4">
      <img src="#" class="img-fluid">
 </div>
</div>

sorry some of the example above, got cut off

I think it’s become Responsive now … @writhisdown :smiley: