Options are not responive

-- HikaShop version -- : 2.6.3 business
-- Joomla version -- : 3.5.1
-- PHP version -- : 5.3.28
-- Browser(s) name and version -- : chrome-51.0.2704.103 m firefox-47.0.1

Hello,
I need your help please!
1) The options on product are not responsive. Only the title are responsive but not the options ( tablet-mobile), and i have long options.
Can you help me please with css?
2) The button Add to cart, has the same responsive problem on mobile
3) I add 2 images (gray color) and after theme a pnone number, but the phone number is not below the pictures, but next of them, and i would like help with the divs please.

I use show_tabular layout with custom fields.

Thank you

Hello,

1. 2. The best solution will probably be to use some CSS code like media queries which will probably help you to do it, here is a thread where you'll find an example :

You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

Here is some documentation about the layout customization:
www.hikashop.com/support/documentation/1...ize-the-display.html

Hi Mohamed,
thank you for your answer,
but look,
I use offen the rool @media (..) for responsive, and i have already read the documentations, but I can not find the the right classes for options, which is the most important problem for the sales.
I have tried many classes, like

.hikashop_product_options_table select 
.inputbox #hikashop_product_option_5
.hikashop_product_characteristics_table select .hikashop_product_options_table select
#hikashop_product_right_part .hikashop_cart_input_button
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-inputwidth

Is there an answer or solution to this? I have the same issue with Options as well as Billing/Shipping address during Checkout.

I made this change on Configuration / General Display and it works great on the Checkout screen. The labels are now above the input box, so there is more space for the inputbox. However, on the the Product screen, its still the same. The label is on the left and the box is chopped off.
What do I need to change to impact the Product page?
ifitshair.cloudaccess.host .

attached is an example of the product page Options boxes.

Great. Thanks. I'll give that a try as soon as I can.

After making the previous change in Configuration to "use bootstrap", the checkout screen for address and email looks great. The labels are above the text boxes and there's plenty of room on the screen. However, there are 2 side effects.

On the product listing screen now shows 1 column only and the item and pane is very large. I havent been able to find settings to correct this to display smaller images and 3 columns as I had before.

The other side effect is on the checkout screen. The payment options no longer have an "option' box. so its very hard to determine which option is selected when using a mobile device.

Any help you can provide on these side effects would be greatly appreciated.

Hi d1hawkins,
I have not understand your problem, sorry for my english, but for the responsive options, I added to my css the rules
@media (max-width: ...px) {
.hikashop_products .row-fluid .span4
.hikashop_product_characteristics_table select .hikashop_product_options_table select
#hikashop_product_right_part .hikashop_cart_input_button

with
{ width: 49% !important; text-overflow: ellipsis;}

and now the options is OK on tablet, for mobile i dont know, because i dont finish yet.
Than i remember text-overflow: ellipsis; help me
I wish you good luck!