[Resolved] Adjusting text width inside a larger container

Home Forums Support Adjusting text width inside a larger container

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1028236
    Daniel

    I want to use the full width of my container for every type of content but not for text because the text spread out too wide on Desktop, making it hard to read.

    In the post Narrow column for text even with full width layout, the css narrow all type of content and not only text.

    In the post different container width for text on page, the proposed solution is to use Sections and custom CSS but I want to use Gutenberg editor and Sections doesnt work with Gutenberg editor.

    Example of what I want to achieve can be found at https://bestreviews.com/best-android-tv-boxes, every type of content (comparison table, images, etc.) except text is full width, text width is smaller than the container making it easier to read.

    I solicit your help to configure the width of the text only.

    #1028287
    David
    Staff
    Customer Support

    Hi there,

    generally this is achieved by wrapping the content inside a HTML Div container for which each one can have a CSS class for setting its width – that is what the example site is doing.

    You can try this shortcut method, which will limit the width and center any Paragraphs that are direct children of the entry-content:

    .entry-content > p {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    #1028297
    Daniel

    It does work well, thank you for your help!

    #1028305
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.