Hi freecodecampers.
I’m currently on the Portfolio challenge, which is one of the firsts and barely have I started that I’m already encountering a road-block.
I read documentation on bootstrap and CSS, but I haven’t exactly got what I am looking for. Now, my searches don’t seem to be bringing up promising solutions. And while I cannot be sure, I have the feeling the solution to my problem will be rather simple. I’m probably just missing a little something, somewhere.
So, I have to structure my portfolio challenge on the one freecodecamp made here.
This is how I structured my first box:
<div class="container">
<!-- Presentation -->
<div class="row" style="max-height: 300px; background-color: #FAFAFA;">
<div class="col-8">
<h3>blablabla</h3>
<hr>
<h2>blablabla</h2>
</div>
<div class="col-4">
<div class="portrait">
<img src="./batmanandrobin.jpg" alt="batmanandrobin" class="img-fluid">
</div>
</div>
</div>
<!-- Portfolio showcase-->
<!-- Contact me-->
</div>
The problem lies with the image. It keeps overflowing vertically into the body. It doesn’t stay in the col-4 column. I tried putting a container box titled portrait, but it doesn’t change a single thing.
Not sure how to move forward on this one, the image is not resizing properly to occupy -only- the space allotted to that pic. I also need to make it round. round-border and img-fluid Bootstrap 4’s classes don’t seem to be giving me the result I’m looking for.