productlist for mobile device

Dazzling
1

I notice that the product title is too Long at a mobile device.
I have the Problem that the title will be over the next product title.
Here an example: Dropbox - productlist.png - Simplify your life

A similar Problem I have also in the footer where I present my different conditions.
One word is very Long and it will be overritten by ist self.
Here a Picture: Dropbox - footer.png - Simplify your life

my shopurl is: agoshop.at

Hope you can help me how I can solve this.
kindly regards

2

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*word wrap text*/
.home th {
    overflow-wrap: break-word;
}

Best regards,
Support.

3

Hi!
Thanks for your answer.
I have inserted this css Code but nothing has been changed.
Hope you can still help me.
Kindly regards

4

HI there

is this css code added by you?

table#product_loop {
width: 200px;
height: 60px;
}
this is the reason why you have problems for product titles, you have t remvoe it

@media only screen and (max-width: 959px){
footer nav.col-md-6 {
width: 100%;
}
}

5

Hi!
Thanks for your answer.
I have done the followig: WooCommerce Shopansicht - Produkte anordnen - Vertrieb im Netz
I Need this changes to get all product in one line.

But I have also tried to delete the Code
table#product_loop {
width: 200px;
height: 60px;
}
from style.css. But nothing has changed.

I have add the following Code in custom css:
@media only screen and (max-width: 959px){
footer nav.col-md-6 {
width: 100%;
}
}
Now my footer is o.k. and I can reed the conditions.
But the Header of the products also overlap.
Hope you can still help me.
kindly regards

6

Hello there,

I checked the products but I am not seeing an overlap, could you provide an image of that issue?

Please try clearing your browser cache because that can help the overlapping.

Best Regards,
Support

7

Hi!
Thanks for your answer.
I clear my browser chache and open my site again but on a productsite you can still see a overlapping of the product title.
Enclosed an example.
Hope you can help me again.
kindly regards

8

HI

Css code is still in the site, please remove it and then purge cache from the caching plugin

9

Hi!
Thanks for your answer.
I have delete the Code from the css file and have delete the Cache from wp fastest Cache (see attached Picture).

But I have still the Problem with the overlapping product title.
Hope you have still an idea.
kindly regards

10

Hello there,

Try out the following CSS to change the padding for the products:


@media only screen and (max-width: 900px) {
.woocommerce ul.products li.product {
    padding-right: 18px;
}
}

Website for reference:
https://www.agoshop.at/produktuebersicht/

Best Regards,
Support

11

i think its fixed now, once the code is removed i cant see the overlap problem,
now please clear cache of your browser or check from incognito tab

Screenshot attached

12

Hi!
Thanks for your help.
Yes it works now everywhere.
kindly regards

13

Hi, there

Ok, I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!