How can I fix image proportion and logo placement in the Debut theme?

Store Design
,
1

We recently transitioned to the updated Debut theme for our online shop. I’m changing the images on the slideshow and gallery but when I come out of the editing view and test it in my web browser window or on my mobile the images change proportions and they get cut. Also the logo on top is supposed to be centralised as per we’ve edited it, but is shown displaced to the left for some reason, here is a link to the website so you can see what I mean: https://riflepaperco.uk/

I this something that can be sorted?

Many Thanks

2

Hi @louisa1973 ,

Please made changes to theme.css
change margin: auto instead of margin: unset.
This will resolve you logo issue

.site-header__logo-image,
.site-header__logo-image >*{
    max-width: 450px !important;
    margin-left: 6px;
    width: 100% !important;
    margin: auto;
}

Screenshot_50.png
Screenshot_50.png347×243 7.67 KB

3

Hi Reena,

Thank you for this, it did fix the resizing of the gallery images but instead put gaps around the image and they don’t “fit” the space anymore. Also the code was already set to "margin: auto; "

so we set it to unset and that’s what caused the gaps around the photos, but aforementioned it stopped the resizing.

  • The logo is still appearing slightly to the left on some devices.
  • Text is getting cropped on images and getting resized/cropped automatically on different devices.

example of cropping

Screenshot 2023-04-13 at 17.08.15.png
Screenshot 2023-04-13 at 17.08.15.png2796×1213 525 KB

Screenshot 2023-04-13 at 17.08.22.png
Screenshot 2023-04-13 at 17.08.22.png1116×1194 267 KB

4

Hi Reena,

Thanks for your help. We replied through the shopify help center on 13th April but have not yet had a reply. Can you help further, please see response we sent below in red;

Hi Reena,

Thank you for this, it did fix the resizing of the gallery images but instead put gaps around the image and they don’t “fit” the space anymore. Also the code was already set to "margin: auto; "
so we set it to unset and that’s what caused the gaps around the photos, but aforementioned it stopped the resizing.

  • The logo is still appearing slightly to the left on some devices.
  • Text is getting cropped on images and getting resized/cropped automatically on different devices.