WebsiteBaker Community Forum
WebsiteBaker Support (2.12.x) => General Help & Support => Topic started 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
-
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)
-
Here is a screenshot from my Samsung A52s mobile. Tested with browser Google Chrome and browser Brave.
-
Website also tested online at: https://responsivedesignchecker.com
The text here is also not good.
-
You want text in cards to be justified instead center ?
-
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?
-
Hello dbs,
I clicked on your link.
It's fine on desktop but not on mobile.
-
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
@media screen and (max-width: 736px) {
p {
text-align: justify;
}
change the entry to
@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)
-
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.