Brooklyn Theme – Hero image Doesn’t Resize In Mobile View

[AlexaBvogue]

Hello! I’m struggling with a problema. On desktop everything looks alright, but on mobile the picture is too big. How do I fix it? 

[PauloBoa · Accepted solution]

Try opening your theme's code editor, go to Assets -> base.css, scroll all the way down to the bottom and paste the following code:

@media only screen and (max-width: 600px) {
  .hero__image {
    width:600px;

    height: auto;
  }
}

The first "max-width" relates to the size of the devices you want to change the picture for, the second related to how wide the picture will be in said devices. If it doesn't work post a link to your store and I'll see what I can do.

[PauloBoa · Accepted solution]

Try opening your theme's code editor, go to Assets -> base.css, scroll all the way down to the bottom and paste the following code:

@media only screen and (max-width: 600px) {
  .hero__image {
    width:600px;

    height: auto;
  }
}

The first "max-width" relates to the size of the devices you want to change the picture for, the second related to how wide the picture will be in said devices. If it doesn't work post a link to your store and I'll see what I can do.

[AlexaBvogue]

Thank you!!

[made4Uo · Accepted solution]

Hi @AlexaBvogue 

I understand that you don't want the image to be cut and able to show full width on smaller device. Please follow the instructions below to fix this.

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the theme.scss.css
3. Paste the code below at the very bottom of the file.

@media only screen and (max-width: 990px) {
.hero.slick-slider .slick-list {
  display: none
}

.hero.slick-initialized.slick-slider {
    height: max-content;
}
}

[AlexaBvogue]

Thank you so much!! It worked perfectly!!