Lightbox opens too large on mobile

[Duotech998]

On Mobile when I click the magnifier or image it opens the image in lightbox and is huge it fills more than the screen size. I have hover set up for desktop but it auto sets to lightbox on mobile. I currently have the theme Crave-  I need to add either the ability to open image within a container or adjust it for screen size.  Only on Mobile 

Thank you

[Moeed]

Hey @Duotech998 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Duotech998]

Vintage Brocante Shop Selling French Finds and Unique Homewares – All Things French Store

thanks 

[Moeed]

Hey @Duotech998 

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 </body> tag

<style>
@media screen and (max-width: 767px) {
img.global-media-settings.global-media-settings--no-shadow.active {
    width: 350px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Duotech998 · Accepted solution]

Hi, sorry to be dumb, Im really not very good at IT. Ive attached what I see now, where do i put the suggestion in? or do i replace what is there?

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ 'base.css' | asset_url | stylesheet_tag }}

[Moeed]

Hey @Duotech998 

It looks like you're confused in where to add the code so feel free to share your collaborator request code in my private messages and then I can add the code for you.

Best Regards,

Moeed

[Duotech998]

Managed to find out where to put it and it has solved the problem, thank you for your help 

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.