Product layout in mobile view distorted (for 6 Incn + size of mobile devices)

Hello,

Need one small help.

I am using following two plugins

I am facing distorted product layoput issue if I view on big size mobiles (6+ inch)….please see attached picture.

This issue is noticed for ALL PRODUCTS on our website on product page if viewed on large screen size mobile phones (6 inch or more)

It works works fine for IPhone – 6s, Iphone 12 mini, Honor 9i (5.9 inch) etc.

I have reached out to Astra theme team of Brain Strom company & they have identified following :

“Texts are overflowing in the large devices which is messing up the layout of your products in the larger mobile devices.

The CSS is caused by Woo Variation Gallery and adding Float: left to the gallery.”

Work-around: – Add the following clode in the additional CSS section of the customizer to override the exisiting CSS.

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: inherit;
}

Above CSS code does fix this issue, however I have started facing other issues , many product images are not visible on different products.

I will appriciate if you can help us in this regard.

FYI…currently , above work-around is in place.

Let me know if you can diagnose this without site access or if you need site access

rgrds…Meenu

website : www.sareeboxes.in

Meenu Sehgal