How can I fix my mobile banner cropping issue on the Debut theme?

Store Design
1

Hi,

My Desktop Hero Banner looks fine, but gets cropped really bad on the mobile.

Is there anyway to make good of it? I would like the mobile to look somewhat similar to the desktop.

Desktop Banner
Desktop Banner2874×1220 216 KB

Mobile Banner
Mobile Banner822×656 90.5 KB

My website is www.laurenglacia.com

Thank you in advance for your time and help :slightly_smiling_face:

1 Like
2

@LaurenGlacia

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {
#shopify-section-hero #Hero-hero {background-position: left !important;}
}
1 Like
3

  1. Go to your store. Click on Actions > Edit Code.

  2. In Assets > theme.css add below lines:

@media (max-width: 749px)

#Hero-hero { background-position: left !important;

}

If helpful then please Like and Accept Solution.

4

Thank you @KetanKumar !

Your solution worked perfectly! And your speedy reply is outstanding :slightly_smiling_face: Thank you!

1 Like
5

@LaurenGlacia

its my pleasure to help us