problems with outlining add-to-cart button

-- HikaShop version -- : 6.1.1
-- Joomla version -- : 5.3.4
-- PHP version -- : 8.4.x
-- Browser(s) name and version -- : any
-- Error-message(debug-mod must be tuned on) -- : none

Hi,

I have a problem with outlining the button on a specific page (category) in my hikashop store.
See the attachements for the differences on two pages on the same website.

On the page readers the outlining is like it should be,
on the page books the outlining fails to show it correctly.

Hope you can help me here.

Hi,

I checked both pages on your website and I can see that since you took the screenshots, you switched to a 3 columns layout in order to give more space for each product of the listing, which seems to prevent the issue with the add to cart button.

Another solution could be to add a bit of custom CSS to your Joomla template in order to allow for more width usage on desktop and laptop screens. Here is a starting point:
forum.joomla.org/viewtopic.php?t=1000149

Another solution is to add CSS with white-space for the add to cart buttons to forbid the potential line return between the words:
developer.mozilla.org/en-US/docs/Web/CSS...operties/white-space
This is potentially the best.

Hi Nicolas,

I have tried each option, none of them worked.
Hope you can give me another solution.

Hi,

What do you mean by none of them worked ?
They have to work. If they don't, it means that you're not using the correct CSS code.

I had a deeper look at your website. For example, to make the main area + sidebar take the full width available, you can add such CSS code in media/templates/site/cassiopeia/css/user.css:
Similarly, preventing the line return on add to cart buttons can be done by adding such CSS code as I was explaining :
Both solutions do what they are supposed to do. I've tested them both on your website via my browser's developer tools.