Dyad-how-to: need to manage page width

  • Unknown's avatar
    olivierogrimaldi2015 · Member ·

    Hi.
    I find the full width page quite narrow.
    I would like to manage this width in relation width browser window width (using % values).
    Can I do it through css?
    Thanks

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, for readability, the golden rule is that lines of text should be around 66 characters maximum (including spaces and punctuation). Longer than that, and the eye can have trouble moving from the end of one line to the beginning of the next and readability suffers.

    Currently with the max-width of the single post pages, the character count per line is over 100 as near as I can estimate given you do not have much content on either of your posts. If you wish to increase the width of the content area on pages and single post pages, the following custom CSS would allow you to do that. 

    body:not(.home) .entry-inner {
  max-width: 900px !important;
}

    Note that this is going to look like things shifted to the left on the two posts you have, but that is because the lines of text are too short to go the full width of the above 900px max-width.

  • Unknown's avatar
    olivierogrimaldi2015 · Member ·

    Well, first of all thank you for your reply.

    I do know these golden rules about readability and user interface.

    Actually I would need to “enlarge” the space only when I insert tables.
    And in pages, not in posts.

  • Unknown's avatar
    thesacredpath · Member ·

    Each page has a unique page id CSS class set in the opening body html tag, which you can find using the web inspector built into your browser. You can use that to specifically target that page or those pages which have tables on them.

    Tables can be a bit of a challenge in responsive designed themes depending on the number of columns and the content of the cells, and can sometimes get unreadable on smaller screens. I would suggest working on a draft page with your table and then previewing it and narrowing your browser window down to around phone size to see how things work. This is just some general thoughts, since I don’t know the nature of your table.

    For the following example, I just randomly used one of the pages you have created, Antiquarium, and this would be the code to set the entry-inner div to 100% width for that page only. To test this, remove the previous code I had given you from your custom CSS. 

    .page-id-728 .entry-inner {
  background-color: #cc0000;
  width: 100% !important;
  max-width: 100% !important;
}

    You will see that I added a yellow background so that you can more easily see the change. You can remove that.

  • Unknown's avatar
    olivierogrimaldi2015 · Member ·

    A very useful advice! Thanks.

    But where do I find the page id class you mentioned?
    in HEAD tags?
    is it a meta property or what else?

  • Unknown's avatar
    olivierogrimaldi2015 · Member ·

    Will you excuse me!
    Didn’t see you already indicated the body tag…
    I’m ok ;-)
    Tx

  • Unknown's avatar
    thesacredpath · Member ·

    Glad you found it and you are welcome. Let me know if you have any problems.

  • The topic ‘Dyad-how-to: need to manage page width’ is closed to new replies.