Why isn't my image overlay resizing for mobile?

Store Design
1

Hello!

I have been trying to do some research on here and have tried various codes I found with others having a similar problem, but it just doesn’t work for me.

I paste under the asset theme.css but still no change.

URL: https://nogoodapparelco.com/

2

@gyang75 ,

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .hero--large {
        height: 488px;
    }
}
@media (min-width: 425px){
    .hero--large {
        height: 250px;
    }
}
@media (min-width: 375px){
    .hero--large {
        height: 235px;
    }
}
@media (min-width: 320px){
    .hero--large {
        height: 200px;
    }
}

Thanks!

3

Hii, @gyang75

Welcome to the Shopify community!
and Thanks for your question.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.hero{
    background-size: contain !important;
    height: 41vw !important;
    width: 100% !important;
}

I have just tried this in your shopify store:

premadestores_0-1643786114462.png
premadestores_0-1643786114462.png312×478 54.5 KB

I hope this will be helpful for you

4

@premadestores THANK YOU SO MUCH FOR YOUR HELP!!! I APPRECIATE IT!