Portfolio Project - stumped on scalability

Portfolio Project - stumped on scalability
0

#1

Hi Everyone!

I’m starting to feel good about my Portfolio page but can’t seem to figure out the right bootstrap (or other) framework to keep my images inside my main (‘content’) div element when I change screen view size. I felt like I was on the path by using container-fluid but just haven’t been able to keep that content inside the div borders when the screen size changes.

That’s my big issue but as you can see I also have the smaller issue of my footer not extending all the way to the left as it should - thoughts on what I need to be learning there?

Any help with either of those two issues or feedback on my attempt in general is greatly appreciated!


#2

I would suggest you take time to read bootstrap documentation and perhaps look up some bootstrap tutorials and examples.

Regardless of bootstrap version, the grid system is all based on containers,rows and columns.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
</div>
</div>


#3

Thank you! I have done the Bootstrap tutorials on FCC twice but as I am struggling I think I need to dig deeper into this.

I tried your solution and its exactly what others suggest for tackling this problem from the ground up but Im struggling to incoporate it into my mess of code. The way I interperate what you are saying is to code something like:


< div class=“container-fluid”>
< div class=“row”>
< div class=“col-lg-4”>
< div id=“content”>

The entire main column of my page in this area.

< /div>
< /div>
< /div>
< /div>


I will do further tutorials for sure but if you see specifically where I am going wrong or what I should be googling let me know. If not no worries, thanks for the help you have already given.

Edit: I had to put spaces inside my Div elements for them to show up.


#4

Check out this video:https://www.youtube.com/watch?v=gqOEoUR5RHg

Try this tutorial. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

Annother booststrap video tutorial https://thenewboston.com/videos.php?cat=373&video=30193


#5

Check out this pen. I reworked your project to be responsive.
I just did the basic css you would have to customize.
Try to study the structure.
Note: I used a different version of bootstrap. 3.3.7
codepen

Note: I could not render image of the dog, Bad link.


#6

Thank you for your generous assistance. The video recommendation is spot-on for the areas I need to look at and I wlll dig into the tutorials.


#7

You’re welcome. Hope that helps.
happy coding :relaxed: