Nigrablanka template problem with text on mobile

[henri]

Created text in the editor looks fine on laptop. But on my Samsung mobile the words are not the same distance apart. I've tried everything but can't get it right. With the Birdoj template, the text is correct on my mobile.
See example below.

Lorem     ipsum    dolor  sit    amet.
Et voluptas   voluptatem   et   quasi
explicabo   eos      velit   nobis    ex
temporibus veritatis. Ab voluptatem
reprehenderit sed saepe

[hgs]

For me, it looks like this and therefore good.
Samsung mobile
https://gyazo.com/b1974caa1eb0feaf5d0caa0977e93cea

Laptop
https://gyazo.com/d6272eb6ff3ebea2a765000e298e2ade

[henri]

Here is a screenshot from my Samsung A52s mobile. Tested with browser Google Chrome and browser Brave.

[henri]

Website also tested online at: https://responsivedesignchecker.com
The text here is also not good.

[crnogorac081]

You want text in cards to be justified instead center ?

[dbs]

What is wrong? Looks normal: https://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Ftemplate.WebsiteBaker.org%2Fpages%2Ffrontend-templates%2Fdemo-jbd.php%3Ftemplate%3Dnigrablanka&width=1400&height=700

Can you give us a link to your real page?

[henri]

Hello dbs,
I clicked on your link.
It's fine on desktop but not on mobile.

[hgs]

Ok, I think I understand what's bothering you.

The CSS formatting is set to justification. This is why some of the words are displayed so far apart.

You can change / test this yourself in the CSS instruction.

If you open the website with

https://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Ftemplate.WebsiteBaker.org%2Fpages%2Ffrontend-templates%2Fdemo-jbd.php%3Ftemplate%3Dnigrablanka&width=1400&height=700

you can select the words and right-click on " Inspect".

The development tool of the browser opens and you can see the CSS instruction and change it temporarily. This has a direct effect on the appearance.

You can find the instruction in the template here, for example:
main.css Line number 3158

Code: [Select]

@media screen and (max-width: 736px) {
  p {
    text-align: justify;
  }change the entry to

Code: [Select]

@media screen and (max-width: 736px) {
  p {
    text-align: left;
  }and the display will hopefully be nice for you.

Translated with DeepL.com (free version)

[henri]

Hello HGS,

This is exactly what I meant.
Now it works perfectly on my mobile and I can continue with this beautiful template.
Super thanks.