Why Does My "Responsive" Images Move up off the Background in Mobile Device Display "Mode"

1

On my desktop the webpage display at https://codepen.io/IDCoder/full/OWbXLw/, is fine, but as the “img-responsive” behavior kicks in on the mobile device, my “Coming Soon” images separate from the background image, as you can see at the following link: https://s25.postimg.org/mmo5sc01b/838217aea886c57dafb7e7acafad4292741d369f_3.jpg

Can that be fixed? Or is that just the way it is? Also, is it possible to have a space between my buttons when they stack up due to the “responsive”-ness of the code? See image here: https://s25.postimg.org/mmo5sc01b/838217aea886c57dafb7e7acafad4292741d369f_3.jpg

Thanks so much for your help!!?

2

Your background image is scaling as its div changes size because of the background-size: contain rule. This tells the browser that your image’s outer edges must fit inside of the div and to make any changes necessary to keep them there. Your “Coming Soon” images don’t really separate from the background, it’s just that the background gets scaled down inside that div such that there’s a lot of empty space at the top. The “Coming Soon” images have the img-responsive class, which lets them scale down. While it may not look so, they’re staying in the same place.

Maybe someone far better at working with CSS will correct me, but the only easy solution I can think of is to change your background-image class to use background-size: cover instead of background-size: contain.

Yup. You’d need to use media queries. These allow you to set rules that are specific to a viewport width, height, and whole host of other variables. It’d look a little like this:

@media(max-width: 425px) {
    .buttons {
        margin-bottom: 5px;
    }
}
3

Thanks alot for your very detailed response to both of my questions! Pure awesomeness!!

4

Hey check the following link where I documented how your answer was successful! Great use for anyone else who might run into the same problem that I did! https://docs.google.com/document/d/1m2B_f2PdqPLj-oOUhiIZQXnxzkjAG8yYjFWVIb54D3Y/edit?usp=sharing

1 Like