Need help with width of banner on mobile!

Site URL: https://www.laswellpreneurs.com/workout-1-social-cleanse

The banner on my website looks like this (on laptop)

But when I'm looking at it on the mobile it's looking like this:

I've tried many code options I'm looking in this forum and none work. I'm able to change the height, but it's not the height I need to change, it's the width.

Last time I tried I did it like this, but nothing happened:

@media screen and (max-width:767px)  {

#contenido-como-medicina-workout .image-block-wrapper img {
    max-width: 50%!important;
    height: auto !important;
}

}

For this particular case, the best that you can do is change the focal point to a different part of the image on mobile. With parallax turned on, the image gets moved to a different container that is not part of that section. So there isn't really a good way to target the image differently. 

one thing you could do is just make the section background color solid pink on mobile:

@media screen and (max-width:767px)  {
#contenido-como-medicina-workout{
    background: pink;
 }
}

You can of course replace pink with your hex code.

On 10/27/2021 at 11:59 PM, PiaLopez53 said:

Site URL: https://www.laswellpreneurs.com/workout-1-social-cleanse

The banner on my website looks like this (on laptop)

But when I'm looking at it on the mobile it's looking like this:

 

I've tried many code options I'm looking in this forum and none work. I'm able to change the height, but it's not the height I need to change, it's the width.

 

Last time I tried I did it like this, but nothing happened:

 

@media screen and (max-width:767px)  {

#contenido-como-medicina-workout .image-block-wrapper img {
    max-width: 50%!important;
    height: auto !important;
}

}

Add this to Design > Custom CSS

/* Workout 1 Social Cleanse Mobile image */
@media screen and (max-width:640px) {
body#collection-617973ffa32ada55e67e5a1e .Parallax-item:first-child img {
    left: 0 !important;
}
}