[Resolved] Mobile page problem

[Robert]

Hello! This is my second support request and I still have no answer to the first one but I still hope someone will read and reply. I am a paid user.

So, I’m creating a website and I have a problem with the content that loads in a mobile browser. Even if everything is set properly for desktop, tablet, and mobile.

Here is an example:

this is how the browser loads the website when I access it: https://imgur.com/bGwnrEl
this is how it changes after just taping the screen: https://imgur.com/sHiSfps

You can test the live website on mobile here: https://beta.retetediabetici.ro/

I hope you understand what my problem is and I hope someone can help me. I’m new to GeneratePress + Blocks.

Kind regards,
Robert

[David]

Hi there,

apologies for the oversight on your other topic, i have just replied. On the odd occassion a topic slips through the system or the reply from a support member doesn’t submit correctly. So if you don’t get a reply within 24 hrs please reply to your existing topic.

So that looks like some CSS is being deferred from loading until a user interaction occurs. What happens if you temporarily disable any optimization plugins ?

[Robert]

Thank you so much for your replies!

Indeed you are right. I use Perfmatters and when I disable it everything works. Any chance you have a solution for this or should I ask them about it?

Kind regards,
Robert

LE: I think I’ve solved it bu adding style.min.css to exclusion. Thanks for the tip!

Quick question so I would not start a new topic: How can I align justified paragraph text in containers?

[David]

Glad to hear thats resolved.

Quick question so I would not start a new topic: How can I align justified paragraph text in containers?

In which Containers ? Can you share a link to where you want to apply justification ?

[Robert]

On the front page, https://beta.retetediabetici.ro, this text for example (or any other paragraph text on the page):

“Inca de la inceputul carierei, medicul nostru si-a demonstrat pasiunea si mai ales grija pentru pacientii diabetici. Pe langa informatiile legate de diabet zaharat atat de bine punctate, Dr. Petrache a considerat oportuna o colaborare cu portalul nostru pentru a le oferi pacientilor variante de retete pentru diabetici cu informatii complete legate in principal de numarul de carbohidrati. Descoperiti in paginile noastre, cele mai utile si complexe informatii legate de nutritia diabeticilor si nu numai.”

[David]

Ok you can force all Paragraphs to be justified using this CSS:

p {
    text-align: justify;
}

That will only apply to text inside a <p> tag though

Or you can create a custom CSS Class on that CSS:

.justify-text {
    text-align: justify !important;
}

And then select a Block, and in Advanced > Additional CSS Class(es) add: justify-text

This method allows you to apply it selectively and to any text element that isn’t a <p>

[Robert]

Can you please tell me how can I create a CSS class? I would like to do that and apply the style only to the paragraphs I want. Sorry for my request but I’m really new to this. I tried to add the code to Simply CSS but didn’t change anything.

[David]

No apologies necessary – i should have explained better.
Add this CSS to your Simple CSS:

p {
    text-align: justify;
}

And then afterwards make sure to clear any of the Perfmatters caches as i can see you have its Unused CSS option enabled, which will need clearing to see that new CSS applied.

If that doesn’t work, temporarily disable Perfmatters and let me know.

[Robert]

Nothing changed. I added the code to the Simple CSS field at the bottom of the frontpage in edit mode and also in the Simple CSS module page in wordpress.

[David]

I can see it 🙂

When you have an optimization plugin like Perfmatters that is doing CSS optimizations it will generally cache the CSS somewhere and so will the browser. So you may need to clear the plugins caches and the browsers caches before you see the updates.

I generally leave optimization plugins switched off until i finish the major work on a site just to keep me sane 🙂

[Robert]

OK, I cleared unused CSS in Perfmatter and it seems it works now. Is there a way to align justified only the paragraph I want and not all of them? Or any chance for the justified mode to be added in the align section so it can be applied like a normal alignment?

[David]

Remove the other CSS and add this to your Simple CSS:

.justify-text {
    text-align: justify !important;
}

Then in the editor, select your Text Block and open the Advanced panel in the sidebar settings:

Now in the Additioanl CSS Class(es) field add:

justify-text

[Robert]

It’s PERFECT! Thanks so much! It will be a nice feature to be added to the alignment menu.

[David]

Yeah its one of those options that WordPress seems to avoid adding to the block editor, it was even the case with the Classic Editor. May have been in the past Browsers had really lousy Justified text handling.

I see theres a couple of open issues on the Gutenberg Github regarding this, maybe they’ll consider it in the future!

Glad to be of help

[Robert]

BTW, I have installed Gutenberg and added my Headline H1 and when I tried to change the color I got the error that the content cannot be displayed. I had to disable Gutenberg so I can modify the color. Is that a bug or?

[Author]

Posts