Popup Width & Checkout Product List Not Responsive

The popup, after 'add to cart', is wider than the mobile device width. I enabled 'use bootstrap design' and set 'popup=bootstrap' but still the popup is wider than width of iphone. Any suggestions?

I can try and change the width via CSS, but I just wanted to know if that will work, and why it is not responding to the settings.

Also, same thing with the product list in the checkout page. It is wider than Iphone width. This is probably because there are many elements displayed (pic,name,unit price,quantity,total).

Is there a way I can hide the 3 letter currency code on the front end only? We'd only use one currency. That might help squeeze it a bit. I tried deleted the 3 letter code but got a message saying that the payment gateway uses it to recognize the currency.

Please advise. Thanks.

Then what is the "popup mode" in the Hika config? It can be set to bootstrap, and I assumed that this would fix the problem. What is this field for then?

Even with the image column disabled, on Iphone portrait mode, the total price for each item overflows, and the total price at the bottom overflows more, is way off to the right.

Is there a way to text-wrap the 3 letter currency code and the price? I have them separated by a space, and tried 'text-wrap: none' but they won't wrap.

The spacing between the currency code and the amount, is defined in the currency config within Hikashop currencies. How can I specify a non-breaking space? It's a yes/no option in the config.

I didn't understand what you mean regarding the popups. Ive disabled the popup for cart.

But in any case the popup width is a major issue, since many other things use the popup, including "adding addresses" for logged in users in control panel. Why does adding an address need to be a popup? Is there a way to change this? In addition, also address popup on checkout page if there is no default address.

Not to mention the image zoom, when you click on thumbnail. How do I deal with this?

The popup sizes can be changed in the views which are calling the popup.
For example, the add/edit address in the user control panel use the view "address / lisitng", you can edit this view and change the width / height values in this code:

			<?php echo $this->popup->display(
				'<img src="'. HIKASHOP_IMAGES.'edit.png" alt="'. JText::_('HIKA_EDIT').'" />',
				'HIKA_EDIT',
				hikashop_completeLink('address&task=edit&address_id='.$address->address_id.'&Itemid='.$Itemid,true),
				'hikashop_edit_address_popup_'.$address->address_id,
				760, 480, '', '', 'link'
			); ?>

echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , '' , $this->image->main_thumbnail_x,  $this->image->main_thumbnail_y);

I edited the view "address/listing", and it did change the width of the popup (on the address listing page only, when trying to add a new address, not on the proceed to checkout page where the address popup pops up when there is no default address). In any case it is still impossible to navigate on mobile, since you can't scroll the popup because it's overlayed on top of the page. Popups are not a very good idea as far as mobile, especially since adding an address is essential and not something I can disable. This needs to be an actual page. Please advise as this is becoming a real headache.

Regarding the image zoom, yes I am speaking of the product page. Will this disable the popup zoom completely? If so then this is not what I want. I would like to disable it based on @media CSS in order to allow desktop users to popup zoom, where as mobile users it's not important to zoom.

Regarding currency spacing, I know that I can enable/disable space between currency code and amount. The problem is I can't get the text to wrap on the "Proceed to Checkout" page. The product list on the Checkout page is too wide on mobile and overflows to the right. If I can get the 2 columns (Unit Price and Total Price) to wrap the text within them, then it would show in the right width on an Iphone portrait mode. How do I get the text to wrap as follows?

Unit
Price

USD
12.99

USD
29.99

etc. and same for the total price column.

Thanks Nicolas.

Regarding word wrap, I override it by adding this into my template.css:

.hikashop_cart_title, .hikashop_product_price {
white-space: normal !important;
}

Worked well. Thanks.

Still looking into the other things. Will let you know. Thanks.