How to remove blank area around size chart?

Solved

How to remove blank area around size chart?

LokNdra
Excursionist
26 0 8

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/

 

1000040881.png

 

 Like this second image.

 

1000040884.jpg

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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:

BSSCommerceB2B_0-1718588925296.png

, and the image should become clearer  like original image.

 

The result will be: 

BSSCommerceB2B_1-1718589006544.png

In my opinion, this display looks good. 

 

Hope it helps! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSSCommerce-B2B
Shopify Partner
565 114 137

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:

BSSCommerceB2B_0-1718564409392.png

 

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: 

BSSCommerceB2B_1-1718564465757.png

 

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! 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
LokNdra
Excursionist
26 0 8

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
Shopify Partner
565 114 137

This is an 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:

BSSCommerceB2B_0-1718588925296.png

, and the image should become clearer  like original image.

 

The result will be: 

BSSCommerceB2B_1-1718589006544.png

In my opinion, this display looks good. 

 

Hope it helps! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
LokNdra
Excursionist
26 0 8

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
Shopify Partner
565 114 137

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.

BSSCommerceB2B_0-1718606687706.png

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! 

 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
LokNdra
Excursionist
26 0 8

Ok thanks