Add max-width to headings/paragraph

  • Resolved andrewcodes404

    (@andrewcodes404)


    1 year, 8 months ago

    yes i have already used

    "layout": {
    "contentSize": "1160px",
    "wideSize": "1400px"
    },

    Odd thing is that in the editor.. a paragraph not in a group row seems to be using “”contentSize”: “1160px”,. But on the front end it is full width?

    in order to get headings/paragraphs to use that layout in the front-end I must wrap them in a ‘group row’ (is that right?)

    But that is a bit of a drag for the editor and I want all headings/paragraphs to have a max-width

    I’ve tried this, but doesn’t seem to work

    "styles": {

"typography": {

  "elements": {

    "heading": {

      "typography": {

        "fontWeight": "700",

        "lineHeight": "1.1"

      },

      "css": "maxWidth: 1160px; margin: 0 auto;"

},

    Also tired

    "blocks": {
    "core/heading": {
    "css": "maxWidth: 1160px; margin: 0 auto;"
    },
    "core/paragraph": {
    "css": "maxWidth: 1160px; margin: 0 auto;"
    }
    }

    but that does work either

    this custom css works

    .b-h2 {max-width: 1160px;margin: 0 auto;}

    but I’d prefer to do it in theme.json

    ps. more layout weirdness.. in the editor the cover block is not full width in the editor… but on the front-end it is

Viewing 3 replies - 1 through 3 (of 3 total)

  • @andrewcodes404 JSON is definitely something to get used to. I myself are still a novice at handling styling and layout via theme.json. Nevertheless, I noticed a couple of things.

    If this works
    .b-h2 {max-width: 1160px;margin: 0 auto;}

    Then you might need to rewrite the json piece:
    "core/heading": {
    "css": "max-width: 1160px; margin: 0 auto;"
    }

    The CSS field in the theme.json takes pure CSS.

    In the styles section (first code examples), the elements value needs to be actual HTML tag representation, so they are not “heading” but h1, h2 etc.

    You could try something like this… 

    "styles": {
      "blocks": {
           "core/heading": {
                 "typography": {
                      "fontWeight": "700",
                      "lineHeight": "1.1"
                  },
                "spacing":{
                      "margin":"0",
                  },
             "css": "max-width: 1160px;"
             },
      }
}

    Reading resources, you probably already studied:

    @andrewcodes404 – Are you referring to Heading and Paragraph blocks in post/page content? By default, these should be constrained to your contentWidth in Twenty Twenty-Three. If this is not happening, it means there’s something else affecting how this works. You shouldn’t need any additional CSS.

    My best guess without seeing your site is that the Post Content block used in your Single Post and/or Page template (via Appearance > Editor) is no longer set to a “constrained” layout. The Post Content block essentially acts the same as a Group block. In order for Paragraph and Heading blocks to be at the contentWidth, the Inner blocks use content width setting should be enabled for it.

    Outside of that guess, I’d probably need to see the site so that I can see what it’s source code shows.

    Thread Starter andrewcodes404

    (@andrewcodes404)

    Thanks @bph @greenshady
    Yes i played around with “Inner blocks use content width?” on the template parts and it fixed it??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add max-width to headings/paragraph’ is closed to new replies.