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>
</header>
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.
Edit:
Read about Bootstrap’s grid system.
2 Likes
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 
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