css reviews section break on mobile devices

The home menu on ipad doesn’t turn up as a sidebar but icon, but instead of showing full width, the space where the menu should be is blank.
(problem page: /home)

The reviews section on alternative device (mobile, ipad) is bleeding into other sections like footer or related products. This happens in both tab and if it is put in a separated section, inported or not.
(problem page: All product pages)

If simulated on a browser, the pages look fine, but not on actual movile devices.

Hi,

Could you please reupload your screenshots in a size smaller than 512KB? Or upload it to some cloud service like Dropbox or Google Drive.

Thank you in advance

sorry about that

Hi,

1. Edit your slider layers for desired device resolution (http://prntscr.com/mbjngq).

2. Try to add the following code snippet to the Tablet & Mobile Custom CSS area in Theme Settings to fix this issue.

.woocommerce-Reviews {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.woocommerce-Reviews #comments, 
.woocommerce-Reviews #review_form_wrapper {
	width: 100%;
}

Regards

Your css works beautifully, thank you, but misses the homepage on ipad device. Also can u check out the “alt” tag on an image bleeding into the product pages image gallery -weird! Both snips attached.

Hi,

1. Edit this row with WPBakery and add extra CSS class tablet-bg-img-hidden https://productislam.com/ipad.jpg

2. Here is a fix to the problem with thumbnails https://xtemos.com/forums/topic/undefined-images-in-product-page-gallery/#post-81149

Regards

(1) The coffee-cup image disappears, but I can live with it.

(2) Works, thanks!

You are welcome.

[Author]

Posts