WebsiteBaker Community Forum

WebsiteBaker Support (2.12.x) => General Help & Support => Topic started by: henri on February 12, 2024, 03:53:26 PM

Title: Nigrablanka template problem with text on mobile
Post by: henri on February 12, 2024, 03:53:26 PM

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

Title: Re: Nigrablanka template problem with text on mobile
Post by: hgs on February 13, 2024, 06:00:32 AM

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

Laptop (https://gyazo.com/d6272eb6ff3ebea2a765000e298e2ade.png)
https://gyazo.com/d6272eb6ff3ebea2a765000e298e2ade (https://gyazo.com/d6272eb6ff3ebea2a765000e298e2ade)

Title: Re: Nigrablanka template problem with text on mobile
Post by: henri on February 13, 2024, 03:41:27 PM

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

Title: Re: Nigrablanka template problem with text on mobile
Post by: henri on February 13, 2024, 03:59:55 PM

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

Title: Re: Nigrablanka template problem with text on mobile
Post by: crnogorac081 on February 13, 2024, 07:39:42 PM

You want text in cards to be justified instead center ?

Title: Re: Nigrablanka template problem with text on mobile
Post by: dbs on February 13, 2024, 07:57:37 PM

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?

Title: Re: Nigrablanka template problem with text on mobile
Post by: henri on February 13, 2024, 08:13:15 PM

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

Title: Re: Nigrablanka template problem with text on mobile
Post by: hgs on February 14, 2024, 07:51:39 AM

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)

Title: Re: Nigrablanka template problem with text on mobile
Post by: henri on February 14, 2024, 03:41:31 PM

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.