Need help with text formating on mobile version of the site

  • Author
    Posts
  • #159866

    vleksander98
    Member
    Original poster

    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:

    PCSCREEN 1
    MOBILESCREEN 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: murasakishiroi.com

    #159874

    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

    #159877

    vleksander98
    Member
    Original poster

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

    #159878

    vleksander98
    Member
    Original poster

    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 :)

    #159880

    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

    #159890

    vleksander98
    Member
    Original poster

    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

    #159898

    vleksander98
    Member
    Original poster

    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?

    #159911

    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

    #159937

    vleksander98
    Member
    Original poster

    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.

    #159955

    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

    #159966

    vleksander98
    Member
    Original poster

    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.

    #159974

    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

    #159981

    vleksander98
    Member
    Original poster

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

    Have a nice day and stay safe.

    #160005

    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.