Product page issue on smart phone

Hey Nathan,

Not only on mobile, on the iPad also http://imgur.com/a/JqXhN
You need to place those elements below each other and then they might stack on mobile.
http://imgur.com/a/NLb9B Does not look aligned here.

Best regards,
Victoria

Hi BodyTalkCare,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.bkap_start_date {
    position: relative;
    width: 40%;
    float: left;
    clear: right;
}
.show_time_slot {
    margin-bottom: 10px;
    width: 77%;
    margin-top: 30px;
    float: left;
    clear: left;
}

#bkap_price {
	display: block;
    float: left;
}

#top form.cart .button {
    display: block;
    margin-top: 10px;
}

@media only screen and (max-width: 475px) {
  .bkap_start_date {
    position: relative;
    width: 88% !important;
    float: left;
    clear: right;
}
.show_time_slot {
    margin-bottom: 10px;
    width: 100%;
    margin-top: 30px;
    float: left;
    clear: left;
}

#bkap_price {
	display: block;
	float: left;
	margin: 16px;
}

#top form.cart .button {
    display: block;
    margin-left: 30px;
}
}

This really has little to do with Enfold, it’s WooCommerce and the booking plugin that you’re using. You need to have some knowledge of css an d html to be able to adjust those things.
If you need further assistance please let us know.
Best regards,
Victoria

Hi BodyTalkCare,

The button is at the bottom, not on the right, the way I see it now.
TO keep the time slot at 50% you need this code:

.avia-webkit #top.woocommerce-page select,  #top.woocommerce-page select#time_slot {
    width: 50%;
}

If you need further assistance please let us know.
Best regards,
Victoria