Help with collection image size on mobile - PRESTIGE THEME

Store Design
1

Hi there I’m hoping someone can help. I don’t like the width of the collection hero image on the mobile, it doesn’t scale down and crops off a lot of the image.

I’m hoping someone can provide me with some code or point me in the right direction where to look in the the code so I can change it please.

You can see the full image in one pic (when my phone is turned landscape)

Screenshot_20230527-115116.png
Screenshot_20230527-115116.png2340×1080 242 KB

but it crops it horribly when in portrait mode

Screenshot_20230527-115054.png
Screenshot_20230527-115054.png1080×2340 307 KB

Thank you kindly

2

Hey @HalloftheFallen

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG339×607 31.5 KB

3

Hey thanks for such a quick response. The code works but not exactly. It’s knocked the text out of the image, ideally it should stay inside the image with an overlay.

Screenshot_20230527-122144.png
Screenshot_20230527-122144.png1080×2340 263 KB

Thank you

4

Yeah the updated code displays it as per your picture. Thank you very much! Is there anyway to reduce the margin top and bottom of that flexibox?

5

Hey @HalloftheFallen
Please add this part of the code too as from the screenshot you have provided shows you have added half of the code only so you need to add the rest of the code too under tag.

.SectionHeader.SectionHeader--left-align {
    padding: 0 !important;
    margin-top: -250px !important;
}

EDIT: To reduce the margin top and bottom add this code

header.PageHeader.PageHeader--withBackground {
    min-height: unset;
}

Don’t forget to Mark it as an Accepted Solution and Drop a Like too!

6

Legend! works perfectly, thank you so much.