Cannot add to cart button not reponsive.

-- url of the page with the problem -- : www.alnaturalhealth.com/test2/index.php/shop-categories
-- HikaShop version -- : ikaShop Starter 2.6.3
-- Joomla version -- : 3.5.1
-- PHP version -- : 5.5.35
-- Browser(s) name and version -- : firefox 47.0

Hi,
I have be customizing the product display on my test shop and learning as I go. I have managed to get the categories listing just about as I want it. At the moment the add to cart button floats off the right the smaller the display till on the very small screens such as in the screen shot it is moving out side the product box and the text will not fit in the button.

What can I do about it?

Thanks for the help

Thank you so much for your help.

I am using Shape 5 template Design Control which is responsive, at least for the content etc. I know it uses bootstrap but don't know which version.
I am not a trained coder, just learning what css etc I need to so what want. I know I need to use @media and have tried a @media (max-width: 767px) { .hikashop_products { width: 49% !important;} } in the HIka shop custom css, and the template custom css, but neither work. I really want to get the products and categories in a single coloum for small screens but have not figured it out yet. What rule do I use? Can you point me in the right direction.

Thanks heaps

Hi,

Your Shape 5 template comes with Bootstrap 2 and its CSS which HikaShop is also compatible with.

Only right now as I look at your site, you have not enabled Bootstrap design in HikaShop. So, you should do this in the configuration: www.hikashop.com/support/documentation/5...html#display_general

Provided no changes in your frontend_custom.css have been made affecting it, it should work fine.

Thanks for explaining. I turned bootstrap on which did the trick putting screens smaller than 766 wide into once column as wide as the screen for categories, and the products stay in one column floated to the left, thus:

Hi,

Bootstrap 2 as provided by your template offers only one single "breakpoint" = the browser width below which the CSS stacks the horizontal columns vertically (768px in your case). So, at 768px and above you have as many elements (= product divs) aligned horizontally in grid columns as you specified in the HikaShop setting of your menu items or modules, and below that breakpoint all these elements/grid columns stack vertically in a single column.
It'd require more breakpoints and, hence, different and much more extensive CSS to do what you want - something that's not easily done.
(FYI, Bootstrap 3 as well as some other "frameworks" allow this, but neither seems your template set for this, nor would it be working with HikaShop 2.x and many other extensions out of the box without some tricks and/or specific view and CSS overrides.)

Bootstrap 2, as the basic framework coming with your template, is the basis for responsive layout and behaviour. So, it's setting the rules in the first place (not overriding them). Vice versa, you could use custom CSS to override Bootstrap, or amend it. While it's theoretically possible to amend it so it's doing what you want, it'd be a substantial customization.

The elements in the "Articles" page you posted the screenshot of are not aligned in any grid like Bootstrap or else. Instead it's Javascript applying in-line CSS and positioning to them. So, that's a completely different way of placing content, and it can't be applied to HikaShop products - at least not unless the extension you are using for "Articles" is able to use HikaShop products as a "content provider"... which I doubt it can.

Wrap-up:
What you want is not achievable with "parameters". As it is now, it's due to both your template and HikaShop working with Bootstrap 2, and working very well with it.
It would require a different template built on a different framework providing multiple breakpoints, plus some tricks, or modifications of HikaShop views and CSS, to get multiple different grid layouts at different browser widths.

Thank you for your complete explaination. It makes a big difference when you understand and know what is possible and what is not. Saves a heap of time and frustration. looking at the display in responsinator, which give a better look at the page as is appears on the device, I think I am fairly happy with it now.
The extesion I used to display articles is Xpert gallery which is really intended for images so I guess cannot be used for Hikashop as you say.

Thanks again for the prompt and excellent help.

Sorry have to come back again. I have the catetories menus reasonable but when I get to the products listing in the menu for each individual category I find the title floats outside the product box thus

1. It is likely a CSS issue. You could temporarily switch to the HikaShop default CSS to verify:
www.hikashop.com/support/documentation/5...fig.html#display_css

However, I don't see the very same effect as in your screenshot under the link you posted in your first post here. In case the issue persists after your checking and possibly fixing CSS, please post a link to the page in question.

2. You're missing some CSS... it might have gotten "lost" during your modifications:

.row-fluid .hikashop_product_column_1, .row-fluid .hikashop_category_column_1, .row-fluid-7 .hikashop_product_column_1, .row-fluid-7 .hikashop_category_column_1, .row-fluid-8 .hikashop_product_column_1, .row-fluid-8 .hikashop_category_column_1, .row-fluid-10 .hikashop_product_column_1, .row-fluid-10 .hikashop_category_column_1, .row .hikashop_product_column_1, .row .hikashop_category_column_1 {
    margin-left: 0 !important;
    clear: left;
}

Thank you for your very fast reply. I changed to the default CSS and the layout issues resolved except that at one product title goes outside the product box edge just a little for screens below about 900 wide . Images and other layout will have to be customised. Categories layout is spot on.

Thank you for you advice. I had saved my custom template CSS before modifying but got slack on this one till just a few days ago. I'm learning the hard way. I kept modifing to get what I wanted but didn't need to some as you said.

The code you posted is actually in my custom CSS still.


Do I create a new custom CSS file by copying the default file and pasting in the custom CSS files?

Thanks again

ecomian wrote: ... the layout issues resolved except that at one product title goes outside the product box edge just a little for screens below about 900 wide

The code you posted is actually in my custom CSS still.

Do I create a new custom CSS file by copying the default file and pasting in the custom CSS files?

ul.thumbnails {
    margin-right: 0;
}

Again, I don't see that happening anywhere on the page you've linked to initially, even at a browser width of 768px. And again, please post a link to the page where you have a problem if you want anyone to take a look at it.

This is the only place I noticed it ...