I try to change the image size by the following code in CSS, the image can show on Dev tools, like mobile devices. But when I try to use the real mobile phone to open it, the image cannot show. Why?

-->

Be Devine, Be yourself.

"CHINESE HAWAIIAN" AVAILABLE NOW

--> .hero { min-height: 100vh; background: linear-gradient(var(--shadow-background-3), var(--shadow-background-3)), url(../img/slides/bg-large.jpg) center/cover; margin-top: -10rem; display: grid; place-items: center; color: var(--color-white); @media only screen and (max-width: $bp-medium) ] background: linear-gradient(var(--shadow-background-3), var(--shadow-background-3)), url(../img/slides/bg-medium.jpg) center/cover; display: flex; align-items: center; justify-content: center; @media only screen and (max-width: $bp-small) { background: linear-gradient(var(--shadow-background-3), var(--shadow-background-3)), url(../img/slides/bg-small.jpg) center/cover; display: flex; align-items: center; justify-content: center; }