I've been using this because it seems like the quickest way to getting ThirtyBees working in a mobile friendly way. It's really great work and has saved me an enormous amount of time. My focus has been on the checkout, because this is where small issues can scare customers away.
Here I would like to share some small but important issues I had that are related to checkout and the ways I resolved them. I am not sure if these issues are caused due to my inexperience and whether or not my fixes are correct, as I'm new to ThirtyBees. It's for reference only.
1. In the checkout, if the customer forgets to tick the Terms and Conditions box, the error notice displayed in the fancybox doesn't fit on the screen on certain mobile displays (e.g. iPhone X). To fix it, I changed the white-space from nowrap to normal by adding this CSS:
.fancybox-error {
white-space: normal;
}
2. When the user clicks "Read the terms of service" (once again this is using iPhone X), not all of the text can be seen (some words are cut off at the right of the box). To fix it, I changed min-width from 360px to 280px as follows:
#cms.cms.cms-3.cms-terms-and-conditions-of-use.show-left-column.hide-right-column.content_only.touch {
min-width: 280px;
}
3. When you use the native PayPal module and have Website Payment Standard enabled, the positioning of the text "Pay with your card or your PayPal account" looks a bit horrible on mobile, as it's on the right of the Paypal graphics and doesn't fit very well. To fix this, I did an override of the PayPal module's template file express_checkout_payment.tpl and added a line break just before the line of code {l s='Pay with your card or your PayPal account' mod='paypal'}. In this way, the text displays nicely under the Paypal graphics.
There was one other small thing not related to checkout. The Store Information was duplicated in the footer. This is fixed disabling the custom HTML block" Store Information" in the footer (BO -> HTML Block -> Customs Blocks).