Support » Theme: Twenty Twenty » Change the width of a “normal” block

  • Resolved rnmartinez

    (@rnmartinez)


    I really love this new twenty twenty theme, and am trying to use it to replace more complicated and poorly supported themes.

    The main issue I am currently having is that I would like to have something in between full width and the normal (default) width for text blocks.

    How could I change this using CSS?

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi, the answer of this question would also help me a lot.

    This will widen normal text block (in <p> tag) from theme’s default 580px to the max width of 960px, change this number to your liking (for example if 960px is too wide, just use 900px or 840px or 720px).

    
    .entry-content > p:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    	max-width: 960px;
    }
    
    

    Just copy and paste the code in Appearance > Customize > Additional CSS.

    Hi @paulwp
    Thank you very much, this works very well.
    Is there also a way to adjust as well the lists, titles, images, blog and buttons so that everything is aligned left?
    best regards,
    Christine

    Yes, it’s the same code but replace p with * (asterisk symbol)

    or just copy this to use instead of that code

    
    .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    	max-width: 960px;
    }
    
    

    Great! thank you 🙂

    dear @paulwp
    I have another question: can I change the accent color by choosing a hex colour instead of the colour bar?

    The idea has been discussed but not much going on yet, the point is they want this theme to calculate color contrast to pass the accessibility standard

    you can see detail here
    https://core.trac.wordpress.org/ticket/48679

    On a sidenote:

    The color picker thing in admin is great for end users to try thing out, but maybe it’s just my feeling that the UX is not very smooth. Chrome’s web dev tool has this color picker live preview that’s easier to work with. When I build website for my client, I would set whatever color just to trigger theme’s auto generated CSS, then view source on the front end to get that set of CSS selectors, then use that to assign color I want in Custom CSS or child theme’s CSS.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    can I change the accent color by choosing a hex colour instead of the colour bar?

    Here’s the answer you’re looking for: https://wordpress.org/support/topic/how-can-i-change-the-link-color-to-a-specific-hexcode/#post-12130660

    @paulwp @macmanx many thanks for your explanation and the links with more information. Nice that accessibility standards are being integrated. I understand know how it works and why.
    best regards, Chris

    Thank you everyone for your help!

    axsu

    (@axsu)

    @paulwp That doesn’t work for wp-block-group.

    What can be the alternative?

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.