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.