How to remove blank area around size chart?

[LokNdra]

Can we something like only the image i upload pop-ups when we click on Size Chart.

Currently the image is small and some blank area is around it.

I Want to remove that black space(marked with red colour) and also the Size Chart text part that i marked with red such that only my image will show(like greeen box) and there will be cross on it to close it.

Store link: https://www.theavalonz.in/

 Like this second image.

[BSSCommerce-B2B]

Hi @LokNdra , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css or section-main-product.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 749px) {
    .product-popup-modal__content-info {
        padding: 0;
        margin: 0;
    }

    .product-popup-modal__content-info h1 {
        display: none !important;
    }

    .product-popup-modal__content-info img {
        max-width: 150%;
        scale: 1.45;
        margin-top: 60px;
    }
}

In this step, I editted css for mobile view. 

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[LokNdra]

Not like that it cropped my left side of image and there is space in right side when we scroll.

Can we something like it automatically adjusts according to photo dimensions.

And why image quality reduced ?

It should be like original image.

Is this possible?

[BSSCommerce-B2B · Accepted solution]

Hi @LokNdra ,

Sorry about my mistake. 

In the previous CSS edit, I tried to make the image fit the size chart frame by adding the scale property to increase it by 1.45 times.

This might be the reason for the reduced image quality. Please try removing this part in step 2:

, and the image should become clearer  like original image.

The result will be: 

In my opinion, this display looks good. 

Hope it helps! 

[LokNdra]

Thanks it's better but it is not like second image i mentioned in post if there is way to do that pls tell me otherwise it's also good thanks for help.

[BSSCommerce-B2B]

Hi @LokNdra , 

I have no other way to make it look like the second image you mentioned in the post because it heavily depends on the design of the image you are setting up in the size chart. Here, only CSS is used to hide the redundant parts and adjust the position of image accordingly.

I think the only way to change it is to replace the source path of the image with another image that has the design you want.

Good luck. 

We're happy to support you. Can you kindly give us likes or mark solution?

This can greatly motivate us to contribute to our community.

Thanks you so much! 

[LokNdra]

Ok thanks