Woocommerce title overflows on mobile devices on custom layout

Hello,

I am currently working on a staging site and I had to ask about something that I saw

I have created a custom archive page of woocommerce, using the layout that the theme provided. On small devices (around 370px) I can see that the header that is set as h1 overflows the boundaries of the parent.

Here is a photo of the problem: https://snipboard.io/VmCz25.jpg
Below I also have a title with the same number of characters and the same font family/font-size, And it appears accordingly and inside the boundaries. Here is also a photo with the title I mentioned: https://snipboard.io/ZlvcgS.jpg

The difference between those two is that the first title is created with the “Woocommerce title” element and the second title with the element “Section title”

Can you assist me on this one?

Best Regards

I have added credentials and the server IP also, in order to see the site.
If you do not add the IP and the domain on your host file you will not be able to see the site, as this is a staging environment and the DNS records of the live one do not resolve on this subdomain.

Let me know if you need anything else.

Hello,

If that issue appears with the “Woocommerce title” element, please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not.

Kind Regards

Hello,

Thank your answer but I would like to ask something. The Woocommerce title element appears inside the Layout pages that I can create using only your theme. If I change the theme I will not be able to test anything. Except for the default pages of woocommerce where it will probably work, as it should. This is an element that is based on Woocommerce, but has settings on its own that can be manipulated by using the Layouts page.

Also, the layout is the type of Products Archive.

If I am wrong about the above or have misunderstood anything, please feel free to test whatever you like. I have already given you access to a staging site. The only thing you have to do is add the IP of the server and the domain on your hosts file of your Operating System.

Best Regards

Hello,

On my side, it looks well, here is a screenshot: https://prnt.sc/8_y9iwVXbGAH

Let me know if you have sorted it out.

Kind Regards

Thank you for your response.

The screenshot you provided is the preview of the layout page. On the preview or if you have accessed the page using the direct the layout URL (Example: https://test.mysite.com/woodmart_layout/category-page-tester/) then the title of woocmmerce category is not rendered, because you are not on a woocommerce page.

Please try to access the category instead and you can see the problem. I have added the URL of the category below

The title “Κατάστημα” means shop in Greek. So it just renders a default value as a placeholder, and as I mentioned before, the actual category name is not rendered.

Let me know if I can assist you with anything else.

Best Regards

Hello,

Layouts were developed for our demo site and did not expect that there would be such a long solid word, but you can change the font here: https://monosnap.com/file/nqhNC2pDDsxsPv7C8DfD06CyCbO2lP

If you have any more questions or come across any other issues, let me know, I’ll be happy to help.

Kind Regards

I can understand that this was for demo purposes and it was not possible to test all the possibilities for all the languages.

As I mentioned before, the change in the font size is not the problem here. Below you can see another title using the same font size, the same font family and the same line height, and it does not overflow the screen. The title has the same number of characters, including spaces. For that title, I am using the title element of Woodmart. I have added a link to the private section so that you can check what I am referring to.

So, one good assumption would be that the specific element creates a problem.

Best Regards

Hello,

We configured 2 elements WooCommerce page title and Woodmart page title with the same properties for the text font-size, font-weight, line-height and as we can see they look the same and extend the same way: https://monosnap.com/file/GNAjkl0eoTiKjYGW9TZoOWLzM9zVRL

Kind Regards

[Author]

Posts