Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 4, 2015 at 12:33 am #405506
    iclo

    Hey there!

    As a complete rookie, as far as web design goes, I’m building my blog with the really helpful Google Material Design.

    Regarding readability (and aesthetic needs) I’m aiming to keep the text in my articles within the range of 50-75 characters per line. To achieve that I use Roboto in size 17 and I insert my text blocks in a 1/2 column element (since my maximum container width is 1310px, that’s the only way I found to get the results I want). It looks fine. But I have to do this job for every single blog post! And if one day I change my mind, I’ll have to do it again… and again. I’m quite sure there’s a much better way to restrict the width of my text blocks and set it as default.

    Merci ! :)

    March 4, 2015 at 4:09 pm #405830
    Yigit

    Hi iclo!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .single-post .avia_textblock { max-width: 400px; }

    Cheers!
    Yigit

    March 4, 2015 at 5:26 pm #405888
    iclo

    Wow was it that quick & easy? I just tried to add this code. It works but now I’d need to have the text centered. We’re almost there!

    Merci :)

    March 4, 2015 at 5:29 pm #405893
    Yigit

    Hi!

    Please change the code to following one

    .single-post .avia_textblock { max-width: 400px; text-align: center; }

    You can use ‘justify’ instead of ‘center’ as well :)

    Regards,
    Yigit

    March 4, 2015 at 5:38 pm #405903
    iclo

    My bad. I meant “centered” as in the text block centered (not the text). The text block is currently on the left hand side of the page.

    March 4, 2015 at 5:42 pm #405909
    Yigit

    Hey!

    Can you post the link to your page where can see an example please? :)

    Cheers!
    Yigit

    March 4, 2015 at 5:51 pm #405916
    iclo
    This reply has been marked as private.
    March 4, 2015 at 5:53 pm #405921
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .single-post .avia_textblock { margin: auto; }

    Cheers!
    Yigit

    March 4, 2015 at 5:56 pm #405926
    iclo

    I added
    .single-post .avia_textblock { max-width: 655px; margin: auto; }
    Is that correct?

    • This reply was modified 9 years, 8 months ago by iclo.
    March 4, 2015 at 6:42 pm #405956
    Yigit

    Hi!

    Yes that is correct :)

    Best regards,
    Yigit

    March 4, 2015 at 6:49 pm #405966
    iclo

    Awesome!

    Since we’re here… considering that I don’t really want to justify my text, any clue to avoid big dent, orphan or hyphenated words?

    Merci :)

    March 5, 2015 at 1:59 pm #406391
    Ismael

    Hi!

    I don’t think there’s a definitive way to prevent that, unless you’re a control freak who counts every characters in the post, but there’s a css property to prevent word break or hyphenated words.

    .single-post .avia_textblock p {
word-break: break-word;
word-spacing: normal;
}

    Regards,
    Ismael

    June 16, 2016 at 9:02 am #649077
    IanWorthington

    To get this to work on pages I’ve had to specify it without the .single-post

    Am I likely to get bitten by this more general usage?

    Ian

    June 16, 2016 at 12:22 pm #649163
    Yigit

    Hi,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your element to give it a custom CSS class and use the code as following if you do not want to apply the changes globally

    .your-custom-class .avia_textblock p {
word-break: break-word;
word-spacing: normal;
}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.