[Skip to main content](#vessel-content)

#   problems with outlining add-to-cart button

##

- **[W13ear](/forum/user/46011-w13ear "View W13ear's Profile")**
- [![W13ear's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/46011-w13ear "View W13ear's Profile") Topic Author
- [ Offline](/forum/user/46011-w13ear)

Less More

- Posts: 40
- Thank you received: 0
-
-

10 months 3 days ago [\#369974](#369974) by [W13ear](/forum/user/46011-w13ear "View W13ear's Profile")  *[problems with outlining add-to-cart button](/forum/26-product-category-display/910023-problems-with-outlining-add-to-cart-button#369974 "-- 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.")* was created by *[W13ear](/forum/user/46011-w13ear "View W13ear's Profile")*

-- 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.
[ ![Readers.png](/forum/attachment/61117) ](/forum/attachment/61117 "Readers.png")

[ ![Books.png](/forum/attachment/61118) ](/forum/attachment/61118 "Books.png")

- [ ![Readers.png](/forum/attachment/61117) ](/forum/attachment/61117 "Readers.png") [ ](/forum/attachment/61117?download=1 "Readers.png")
- [ ![Books.png](/forum/attachment/61118) ](/forum/attachment/61118 "Books.png") [ ](/forum/attachment/61118?download=1 "Books.png")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTAwMjMtcHJvYmxlbXMtd2l0aC1vdXRsaW5pbmctYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86541
- Thank you received: 14304
-
-

10 months 2 days ago [\#369978](#369978) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[problems with outlining add-to-cart button](/forum/26-product-category-display/910023-problems-with-outlining-add-to-cart-button#369978 "-- 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](https://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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space)
This is potentially the best.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTAwMjMtcHJvYmxlbXMtd2l0aC1vdXRsaW5pbmctYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[W13ear](/forum/user/46011-w13ear "View W13ear's Profile")**
- [![W13ear's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/46011-w13ear "View W13ear's Profile") Topic Author
- [ Offline](/forum/user/46011-w13ear)

Less More

- Posts: 40
- Thank you received: 0
-
-

6 months 2 weeks ago [\#371663](#371663) by [W13ear](/forum/user/46011-w13ear "View W13ear's Profile")  Replied by *[W13ear](/forum/user/46011-w13ear "View W13ear's Profile")* on topic *[problems with outlining add-to-cart button](/forum/26-product-category-display/910023-problems-with-outlining-add-to-cart-button#371663 "-- 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 Nicolas,

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

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTAwMjMtcHJvYmxlbXMtd2l0aC1vdXRsaW5pbmctYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86541
- Thank you received: 14304
-
-

6 months 2 weeks ago [\#371667](#371667) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[problems with outlining add-to-cart button](/forum/26-product-category-display/910023-problems-with-outlining-add-to-cart-button#371667 "-- 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,

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: Code:

/* Expand the main content area to the left edge */ .site-grid .grid-child.container-component { grid-column-start: full-start !important; } /* Expand the sidebar area to the right edge */ .site-grid .grid-child.container-sidebar-right { grid-column-end: full-end !important; }

Similarly, preventing the line return on add to cart buttons can be done by adding such CSS code as I was explaining : Code:

.hikacart { white-space: nowrap !important; }

Both solutions do what they are supposed to do. I've tested them both on your website via my browser's developer tools.

The following user(s) said Thank You: [W13ear](/forum/user/46011-w13ear "View W13ear's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTAwMjMtcHJvYmxlbXMtd2l0aC1vdXRsaW5pbmctYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.060 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
