Portfolio Project Help Needed

When I resize the browser on my portfolio project, this happens to my text.

How would I fix so the webpage looks neat when I make my browser smaller?

is it on codepen? please add link to ur project

Try using the class col- to organize your head id.
You could also use the <header></header> tag instead of naming an id “head”.
One way you could go about it is having something like this:

<header class="col-md-10 col-md-offset-1">
<img class="col-md-4">
<p class="col-md-8">text goes here</p>

You can also use col-sm- and col-xs- for smaller screens.

Lastly try getting rid of unnecessary <div>, it’ll help you see your code more clearly.
Hope this helps.

Read about Bootstrap’s grid system.



can you show me the code?

hi guys i made this portfolio page but for some reason few images don’t work and i just cant find why :confused: https://codepen.io/KlaSta/full/GEWdQb/

on chrome they all work…

you got 2 bootstraps in you pen, you’d better choose one , their classes are slightly different, your first move is to read carefully abt bs (your chosen version) grid system.
well basically its you choose container .container ( it has space around it) /.container-fluid(takes all avail space) for a section you are arranging, add rows with cols inside a container(up to 12 cols /row) .container and .container-fluid are not to be nested.
you can check w3schools bs examples e.g. https://www.w3schools.com/bootstrap/bootstrap_templates.asp

1 Like