Need help with text formating on mobile version of the site

  • vleksander98 · Member ·

    Hello,
    I was wondering if You could solve one of the esthetic problem I ve had for a while now. The thing is that the text formating I use on my articles look pretty okay on the desktop version of my site, but it gets very chaotic on mobile version. I would like to get rid of those huge in-text spaces on mobile version of my site without changing its current look on the desktop version. If you could help me with some CSS code that would make it look better (on mobile) in any possible way (chaning font size or something), I d be very gratefull for that.

    Here are the screenshots of both desktop and mobile version of my site:

    PC – SCREEN 1
    MOBILE – SCREEN 2

    Thanks in advance and stay safe :)

    PS I know that I can easily get rid of blank in-text spaces by not adjusting horizontal spacing, but without it, it looks worse.

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hello,
    Thank you very much for a descriptive support request!

    It looks like you have a justified text on your site. By default, the theme comes with a left-aligned text.

    The bad news is that your text has an inline CSS which changes the alignment. So, we need to use “!important” in our CSS to make a change. I do not really to use “!important” because it can cause style issues in the future.

    Here is a custom CSS you can use to override that justified text in mobile views:

    
@media (max-width: 500px) {
  .single .entry-content > [style*="justify;"] {
    text-align: left !important;
  }
}

    Please let me know if you have any additional questions.

    By the way, what control do you use to set that alignment? The thing is that the Block editor does not add an inline CSS but your content has an inline CSS for text alignment.

    Kind regards,
    Taras

  • vleksander98 · Member ·

    I use (alt+shitf+J) command on all paragraphs

  • vleksander98 · Member ·

    I ve just used CSS code of yours and it pretty much solved the problem :) Like i said – Ive justified text on my site on purpouse because I just thought it looks better, but on phone it looked pretty bad. Now when the desktop stayed the way I wanted and mobile version is aligned to left, it is looking pretty cool so thanks a lot for that.

    Have a nice day :)

  • tarasdashkevych · Theme Author ·

    Aleksander,
    You are very welcome! :)

    —

    “I use (alt+shitf+J) command on all paragraphs”
    – Based on inspection on your content, it seems like you are using a Classic editor. This command justifies a text but it adds an inline CSS which is not very good.

    It’s better to use CSS classes. That’s what the Block editor does: https://wordpress.com/support/wordpress-editor/blocks/paragraph-block/#block-toolbar

    Kind regards,
    Taras

  • vleksander98 · Member ·

    Are there any serious effects of the text formatting (Alt+Shift+J) that I am currently using? I mean, if thats something serious I would have to edit through 400+ posts, so therefore I wanna know if thats something I should worry about

  • vleksander98 · Member ·

    I actually tried using Block Editor for my newest post and I dont really like it (can’t even insert ad codes properly). I would like to stick to the classic editor that I am used to but I just wanna know if I have to unjustify text in all the posts to avoid CSS problems that u mentioned?

  • tarasdashkevych · Theme Author ·

    Hi Aleksander,

    I’ve just tested the Classic editor (https://wordpress.org/plugins/classic-editor/) and it looks like it’s using inline CSS to set alignment for the element.

    We can use another solution to justify text on your site. Instead of using the alignment option from the Classic editor, we can set a global style for the content area to automatically justify text in singular views.

    Let me know what you think about this approach.

    Kind regards,
    Taras

  • vleksander98 · Member ·

    That sound pretty good! I ve already changed most of my posts to left aligmnet text formating and deleted the part of CSS code that You gave me before, so for now – everything is aligned to left to avoid problems You told me about. If there is an option to globally justify everything without having unwanted style issues I am tottaly down for it.

  • tarasdashkevych · Theme Author ·

    Aleksander,

    Yes, it’s better to use global styles in this case. Please add this custom CSS to your site:

    
/* justify text in singular views in all devices except mobile */
@media (min-width: 500px) {
    .single .entry-content {
        text-align: justify;
    }
}

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • vleksander98 · Member ·

    The text looks great now with the code of Yours but the problem is that it works only on a minority of the posts.

    Is there any solution for this issue? I suppouse this is caused by the inline CSS done by me with the alt+shift+J command I ve used before, but is there any way to solve it quicker than editing every post one after another?

    PS Sorry for continuing my formating issue that long but I really wanted to make something with it for a long time.

  • tarasdashkevych · Theme Author ·

    Aleksander,

    “I suppouse this is caused by the inline CSS done by me with the alt+shift+J command I ve used before…”
    – I think you are right. So here is a plan.

    For new posts, please do not use that command to align the content. Instead, keep this custom CSS on your site:

    
/* justify text in singular views in all devices except mobile */
@media (min-width: 500px) {
    .single .entry-content {
        text-align: justify;
    }
}

    Moreover, you can keep your old posts as is but also add this custom CSS to your site:

    
/* disable justify alignment caused by inline CSS in mobile views */
@media (max-width: 500px) {
  .single .entry-content > [style*="justify;"] {
    text-align: left !important;
  }
}

/* justify left-aligned text in singular views in all devices except mobile */
@media (min-width: 500px) {
    .single .entry-content > [style*="text-align: left;"],
    .single .entry-content > .has-text-align-left {
        text-align: justify !important;
    }
}

    Note, the last two CSS will disable the alignment options in the Editor. You still will be able to set alignment but it will have no visual effect on your actual site.

    —

    “Sorry for continuing my formating issue that long but I really wanted to make something with it for a long time.”
    – No worries! I am here to help you to resolve this issue on your site :)

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • vleksander98 · Member ·

    Everything is looking fine now! Thanks a lot for help :)

    Have a nice day and stay safe.

  • tarasdashkevych · Theme Author ·

    You are very welcome! :)

    Kind regards,
    Taras

  • The topic ‘Need help with text formating on mobile version of the site’ is closed to new replies.