Hi everyone, I am working on my portfolio page and I have 3 sections, those 3 sections begin as it follows:
<div class="jumbotron">
<div class="container">
I have a grid of images in the first and second sections and they work and scale fine on all screen sizes using the img-responsive class, however I decided to stop using jumbotron so I could give each div section a different color and as soon as I do that the images expand beyond the size of the div element they are nested in, I’ve tried resizing the images and it works for certain screen sizes but not for others.
I know I can manually override the jumbotron color properties but I’m left wondering if this is the only way to fix this problem.
Thanks in advance.
Hi, I’m not using codepen so I just copied the code inside codepen and that’s why it doesn’t show any pictures but I just uploaded it to github and it works fine, now I want to apologize for making a mess of this thread.
So the code as it is right now works perfectly fine, as you can see I am using a jumbotron class for each of the 3 sections but as soon as I delete the jumbotron classes all pictures increase their size and expand outside of their div containers.
I replaced your pics with some pics i found on the web, but i’m not able to duplicate the pictures popping out of the divs. One thing i do see is you should really only use one container class then put all your rows and col- inside that container. I quickly put a code pen together of the way i would have set it up(mostly, not perfect). Also i’m in the mindset that jumbotrons should be used only once at the top of the page for a hero image kind of look, to get mostly the same look you can use a
Thanks a lot, I have just finished polishing and improving my portfolio page, here is the link if you want to check it out. https://megosh225.github.io/
Thanks again.