0

The pictures on my home page disappear when the browser is resized to mobile size/view and when on mobile.

  • That's because bootstrap class (`showcase-img`) does not work with small screen. You should read the rules and have more constructive questions – Kien Pham Mar 23 '19 at 01:53
  • 1
    Please don't make more work for other people by vandalizing your posts. By posting on Stack Overflow, you've granted a non-revocable right, under the [CC BY-SA 3.0 license](https://creativecommons.org/licenses/by-sa/3.0) for SO to distribute that content. By SO policy, any vandalism will be reverted. If you want to know more about deleting a post, please read more at [How does deleting work?](https://meta.stackexchange.com/q/5221) – iBug Mar 26 '19 at 19:04

1 Answers1

2

I looked at your website and it appears to revolve around this media query declaration you have in your landing-page.min.css code.

You are declaring the following query twice. In the first block you have this declaration:

@media (min-width:768px){

  .showcase .showcase-img{
   min-height:30rem;
  background-size: cover;
}
}

You then have an identical block using the exact same declaration (i.e. @media (min-width:768px)) but you don't have this class declared in the tag. What is happening is because of the Cascade nature of CSS, which means it executes sequentially.

Because this is the case you, are essentially wiping out what is listed above because it is not declared, thus your images are disappearing when you resize to 768px or less. You can see for yourself if you take the first media query and change it to a smaller value (like 320px). You will then see that it displays somewhat correctly.

This has actually been answered before on SO:

Why does the order of media queries matter in CSS?

That said you need to:

1) put all of the class declarations that you have in one media query, not two

2) determine if you really need the media query. If you do you need to make sure you really understand the max-width and min-width ranges with respect to media queries as used in responsive design best practices.

3) On a browser on your desktop, navigate back to your site and use the developer tools in all of the major browsers. You will be able to see the different sizes as you resize and you will be able to see what classes appear/disappear when you hit the viewport size break point.

Of all the suggestions, please refer to #3. The developer tools feature in browsers are unbelievably helpful in diagnosing a wide variety of CSS/Coding/HTML issues you may encounter.

Jack B
  • 21
  • 3