[Resolved] Narrower, left aligned text block problem.

[Chadwick]

I’m trying to have a narrower block of text (I don’t like long line lengths) underneath a wide slideshow embed (I want the image to be large). A screenshot:
https://www.dropbox.com/s/ek8r1vifava3clr/screenShot-01.jpg?dl=0
In this example, the image container is 960px wide and the text is 720px.
I’ve tried a few things:
1. GenerateBlocks and containers – I can change the container width but the text block is centered below the image. Is there a way to left align the container with the paragraph in it?
2. Column blocks: Using a 75%/25% split row, with the right box left blank. A sloppy solution and it behaves in an ugly way when the browser size is smaller/adjusted.
3. GenerateBlocks grids. Similar approach to columns but it behaves better when viewing a single post. However, it only works for the top post in blog view. The rest of the posts display the text blocks at full width. Workaround: if I copy the code from the first post and paste to all the other ones so all the posts are using grids with the same “uniqueId” and “gridId”, it works in the blog. But it seems like this is bad, no? Will duplicate “uniqueId”s cause other problems?
I’m hoping there is a css solution with containers or something? Any help would be greatly appreciated.

[Ying]

Hi Chadwick,

If you use the 1 st method, give the container block an addtional CSS class, eg. narrow-text-container
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

Then add this CSS:

.narrow-text-container.gb-container {
    margin-left: 0;
}

Let me know if that works.

[Chadwick]

That does work for the single post view. It’s a much better solution, thanks! However, in blog view, the container’s contained width and the added CSS class only works for the top post. The text is full width for the rest. BUT if all the text containers use the same UniqueID, then they all work in the blog.
<!-- wp:generateblocks/container {"uniqueId":"f0fc5c88","outerContainer":"contained","containerWidth":640,"isDynamic":true,"blockVersion":2,"className":"narrow-text-container"} -->
I’m using this “work around” but will duplicate “uniqueId”s cause other problems?

A screenshot might explain the problem better:
https://www.dropbox.com/s/7q3suicc5yf3cap/screenShot-02.jpg?dl=0

[Elvin]

Hi there,

We can expand on Ying’s point.

You can add this CSS to narrow down the content width of this container.

.narrow-text-container.gb-container > * {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

This way, you won’t have to do iffy things like duplicating container block unique ids.

[Chadwick]

Thanks for that suggestion. That code made the text blocks centered (not left aligned). I tried a couple variations and this worked:

.narrow-text-container.gb-container {
    max-width: 640px;
    margin-left: 0;	
}

It didn’t like the > *. But I found something that mentioned GenerateBlocks doesn’t work for the blog, archive, outside the page or post.
https://wordpress.org/support/topic/grid-block-doesnt-work-when-added-outside-page-or-post/

So thought I should not use GenerateBlocks. I simplified to just a paragraph block with an “additional CSS class” called narrow-text and made a version of that class for p in the custom CSS:

p.narrow-text {
    max-width: 640px;
    margin-left: 0;	
}

Is that a legit way to do it? Thanks for the help!

[Ying]

This solution looks good to me 🙂

But I don’t think margin-left:0; is needed in this case.

[Chadwick]

Tried it, but without the margin-left:0; the text block gets centered again (not left aligned). Thanks for all the help!

[Ying]

You are welcome 🙂

[Gregor]

I had a similar issue and this worked for me:

.gb-container-Contact-Narrow-Justify-Right-Container.gb-container {
margin-right: 0;
}
.gb-container-Contact-Narrow-Justify-Left-Container.gb-container {
margin-left: 0;
}

I put my text in Containers, then made a Global Style for each Container.

In Layout I had these settings:
CONTAINER: Contained width
Container Width: 560 px

As far as I can see, Ying’s original answer was correct but you need to use the correct Container settings in your Global Styles.

IMPORTANT NOTE: Changing the Container to Full Width and setting an Inner Container to Contained Width will override the code and cause it to revert back to “margin-left: auto”.

[Author]

Posts