Vertical Alignment and Stacking with Boostrap Columbs - Tribute Page Help!

1

I’m working on my first project, the tribute page - https://codepen.io/derekbmcintire/full/KNyLrR/

I’m totally new to coding and having some trouble. First, I’d like to get the quote at the bottom to align vertically in the center, since the photo to the left is significantly taller and there is a bunch of blank space under it.

Second, when I squeeze my screen size down, instead of stacking, the right column just goes over the left one. If I get rid of the background to the quote it actually puts the text underneath the photo and looks fine, but if I have the background in there it just totally covers the photo.

I have searched around and tried to use some other methods I found but none of them seemed to work. If anyone has any ideas that might help, I’d appreciate it, thanks!

2

With making sure that the oval doesn’t cover the pictures, you can add col-sm-12 to both of the picture and the oval. This will ensure that if the screen gets below a certain size, they will each take up the full with of the screen and stack on top of one another.

For the issue of centering the oval vertically, I would probably just add a margin-top: 70px to the class that styles the oval. You can play with this to get something that looks right. You could also add a media query if you didn’t want to maintain that top margin when the screen gets below a certain size, i.e. when they are stacking.

3

Thank you! I didn’t realize you could add more than one column setting, now the sizes make more sense to me. I’ll play with the centering more an look into what a media query is.

4

I’m sorry, I’m only seeing this now. A media query is a special CSS rule that will only apply for certain screen sizes. The below example will set the padding on the oval to 70px when the screen is above the size of bootstraps col-md-* classes and to 10px when the screen is smaller than that:

@media (min-width:992px){
    div.oval{
        padding-top: 70px;
    } 
}
@media (max-width:992px){
    div.oval{
        padding-top: 10px;
    } 
}

I realize that this is probably no longer relevant to you, but I said I would post it just in case.