How can I resize images for optimal mobile viewing?

Store Design
, ,
1

Hi all!

I needed help regarding resizing pictures to ensure that they’re seen in the mobile version as they are on the desktop version. I was wondering if anyone will be able to guide me a bit better.

So far, I’ve used the code you provided to another individual having the same exact issue. It helped her. But somehow for my mobile version it’s still cut off.

I’ve tried resizing the image itself, the shape of the image and I’ve got nothing.

Thank you for taking the time to read this and if you would be able to assist that would be most excellent. I would love to have it seen as the desktop and full screen version — ON the mobile version.

D1C3D0DA-5EB2-4176-9CD8-EB87C2EBBB6D.jpeg
D1C3D0DA-5EB2-4176-9CD8-EB87C2EBBB6D.jpeg1168×1452 103 KB

@MamaBear222

2

Hello @MamaBear222 ,

Can you share the URL of your store?

3

Hi @ErayBarslan yes I can.

https://bear-wit-me-x-mb.myshopify.com —- is that what you mean?

4

Yes @MamaBear222 but the store is password protected. We need to view the store to provide a solution. Can you remove or provide the password as well ?

5

@ErayBarslan Absolutely I can. I’m sorry about that. It’s been protected while I work on it, one moment. check back in 2 minutes and refresh it.

6

Hey, How’s it going as of now? Any progress?

7

Thanks for providing the password. I see the issue now that there is a constant 50 pixel gap on banner image and background for mobile screens. I couldn’t identify the cause from the browser inspector but following these steps will fix it:

  • Online Store > Themes > Edit code (next to Customize) > Assets > theme.scss
  • Into the scss file copy snippet:
@media only screen and (max-width: 749px) {
  .slideshow--adapt .slideshow {
    margin-bottom: -50px;
  }
}

There is already rule for the slideshow within the same file. You can as well add it by:

  • CTRL+F and search for “.slideshow–adapt .slideshow”, make sure it’s the rule with (max-width: 749px)
  • From there, instead of adding the entire snippet I provided above, you can add “margin-bottom: -50px;” below other rules. within the same bracket { }

Make sure to duplicate your theme before making any changes. I hope it helps and good luck! Feel free to reach out if you need any further assistance.

Best regards,
Eray Barslan | Shopify Developer & Designer

8

Thank you so much for trying to identify and fix the issue so that I can have that image not be cut off. I’m going to try this out. I do have one question though; when you explain ”

  • From there, instead of adding the entire snippet I provided above, you can add “margin-bottom: -50px;” below other rules. within the same bracket { }”

do you mean go UNDER (below) the entire copy + paste file and make sure it’s 749px — and underneath the bracket or INTO the bracket at the bottom? I think that part is a bit hard for me to get.

9

@MamaBear222 In that case, ignore that part and you can simply copy the snippet I have provided into the theme.scss file. I’d suggest adding to very bottom so you can find your changes easier next time.

10

Ok I will. Was the other area needed as far as the slideshow? because I will try and figure that out as best as I can if it’s important with helping having the entire image be shown and not cut off from the top logo.