Hello guys. Please kindly help me review this

Hello guys. I built this with bootstrap. I’m not done yet but I would like reviews on how I can improve the page and if its responsive enough. Please don’t mind my footer

https://codepen.io/moshoodaisha/live/eaYMWE

Projects images are getting kinda flattened in my widescreen monitor. I also feel “About Me” and “Technologies” conflicting as they have different font sizes.

And, er… Capitalize your “i” in “Adobe xd” description.

1 Like

Thank you so much. I would get on this very soon

  1. The columns inside the jumbotron are not centered because you are using col-md-5, which is only using 10 out of the 12 columns. Use col-md-6 instead.

  2. The images have too different dimensions and you are setting the height using % which will make them distort. You can add object-fit: cover; which will help but really you should try having images with dimensions closer to each other and then use the bootstrap image classes.

  3. I would wrap the images in links to the projects instead of just having the view project link.

1 Like

Omg this is so helpful. Thank you so much for this. Would try this very soon.

Also please im trying to add font-icons but they don’t seem to work and I dont know what else to do

I assume you mean font-awesome? Click the Settings button, go to the CSS tab and type font-awesome in the search box (Search for resource), then click the link.

heyyy the font awesome worked thank you so much and ive done the updates and object-fit you told me about please could you help me check the link again

  1. You didn’t change the col classes in the jumbotron.

  2. You have inline styles (width/height) on the images you need to remove.

Change:

<img src="https://vignette.wikia.nocookie.net/marveldatabase/images/6/60/Sentry_Vol_3_1_Textless.jpg/revision/latest?cb=20180320215750" height="100" width="100" alt="tribute page">

To:

<img src="https://vignette.wikia.nocookie.net/marveldatabase/images/6/60/Sentry_Vol_3_1_Textless.jpg/revision/latest?cb=20180320215750" alt="tribute page">
  1. I don’t see object-fit anywhere, you are also making the images too small.

  2. You are changing CSS on bootstrap classes directly, don’t do that. Use the bootstrap utility classes like the spacing classes, or make new classes and add them to elements as needed.

I made a fork of your project with some changes, I added a few comments. I can delete the fork when you are done with it, just let me know (you can fork it so you have a copy). You can implement any of the changes you like but just do it by hand (don’t copy/paste) so you get some practice.

Edit: fork deleted

1 Like

omg you are so helpful for this i would get on this right now thank you so so much

and please if you can delete the forked version 6 hours from now would like to go over every thing again

I would suggest you just make a fork of it now, press the Fork button up top. Then you have a copy. Let me know when you have it and I can delete my pen.

also my normal and forked and normal version ( in the (div class = caption) my h1 isnt showing and i dont know what to do tried everything already but my navigation bar is covering it up i tried removing the border from the navigation bar but that also dosent make it work

yes i have made a forked version thank you so much for this

Add a class to it with some padding-top.

.main-header {
  padding-top: 120px
}

<h1 class="main-header">HI IM OLUSHOLA</h1>

Or you can use the bootstrap classes, but because you need so much spacing you would have to use both the padding and margin classes.

<h1 class="pt-5 mt-5">HI IM OLUSHOLA</h1>

I will delete my fork now, happy coding.

thank you so so much i really do appreciate this