CSS Issues - Add Cart Buttons, Added to Cart Notice Box

Hi I have 2 issues I can't seem to fix..hope you can help.
I'm using Joomla! 3.4.1, latest Hikashop Business and latest Storefront Template.

1.
http://andypoint.sapura.com.sg/sales/
On the Product listing page, the Add to Cart buttons are fine, it's grey and when hovered turns blue.

http://andypoint.sapura.com.sg/sales/in ... acbook-air
But on the Product Details page, it's blue but when hovered, turns Black, how can I change this to be the same?

2. Clicking on the Add to Cart button, it shows a modal notice box that says 'Product is successfully added to Cart' and with 2 buttons 'Continue Shopping' and 'Proceed to Checkout'. Firstly the style is not using Storefront template.. how can I apply the storefront style to this?

3. In Mobile view (iPhone 5S), the menu items Account and Checkout are hidden.This is also same for your demo site. how can this be displayed?

4. The Registration fields on the registration Page in mobile view are offscreen. Can this be responsive? http://andypoint.sapura.com.sg/sales/in ... /user/form

Hi

1. Add this to css:

Code: Select all

input#hikashop_add_to_cart_continue_button,
input#hikashop_add_to_cart_checkout_button,
input.hikashop_cart_input_button {
    background: #5999e8 none repeat scroll 0 0;
    border: 1px solid #5999e8;
    color: #fff !important;
}

input#hikashop_add_to_cart_continue_button:hover,
input#hikashop_add_to_cart_checkout_button:hover,
input.hikashop_cart_input_button:hover {
    background: #222 none repeat scroll 0 0;
    border: 1px solid #222;
}


2. I guess the above code will work here too.

3. It's done on purpose, so top of the page is not so crowded. There is an additional link to this element at the bottom of the site.

4. It is responsive Please try to scroll sides in form. It's a standard responsive functionality for forms.

Thanks for your reply. Appreciated.

1. This works.
2. This doesn't work.. it is still grey and when hovered, turns red.
3. possible to make it stay at the top?
4. Is it possible to shorten the length of the fields when it's in mobile (320px)?

Hi

2. Code will most probably work, but I've missed the fact this file is not loaded in popup. Try add same code to media/media/css/mediamanager.css

3. I believe it can, but will require some additional codding and we do not support such changes, sorry.

4. Best I can think of is to add this to template's mobile.css file

Code: Select all

tbody tr td {
    display: block;
}


but I'm not sure if all browsers will like such solution.