[Resolved] Issue with nesting blocks in GenerateBlocks

Home Forums Support Issue with nesting blocks in GenerateBlocks

  • This topic has 6 replies, 3 voices, and was last updated 2 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1379374
    Elisabeth

    Hi there,

    I’m loving Generate Blocks but am stuck on this one particular seemingly simple thing.

    I have a container 1200 px wide in the main content area of a page. Inside that I want to put an h1 heading followed by three paragraphs of text, wrapping around an image. Below that I want to have an h2 heading followed by a few more paragraphs of text. I also would like to have (on mobile) the image to be centred, but when on desktop and tablet to have it right aligned.

    So I’ve tried a ‘normal’ wp image block inside the container with alignment set ‘right’ and the h1 heading and the following paragraphs wrapped around. It won’t align centre on mobile as the out of the box WP image block doesn’t have that feature.

    So I have also tried to create a GPBlocks grid, with a left and right column, inside the container and put the h1 and the three paragraphs on the left and the image in the right column of the grid. The beauty is that the grid settings allow me to align content differently for different screen sizes. The works on desktop, and I can centre the image in the grid cell any way I want for mobile and tablet… But on tablet the paragraphs of text hang down below the image and very much over to the left as you can’t wrap the text around the image (as it’s within the grid cell to the left of the image’s grid cell). With mobile it’s okay as it stacks the image after the text anyway. But in smaller desktop screens or tablet it’s a messy look.

    Is the only solution maybe to stack the images/text differently? Or is there a way of wrapping the text around the image until the screen width gets to a particular size and then instruct it to stack instead?

    Thank you!

    #1379753
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your first try seems more simple – what if we could use CSS to center it instead of using an option?

    Do you have an example of the layout you’re trying to build?

    #1380136
    Elisabeth

    I’d be happy to do that with CSS now you mention it… seems like the simplest option…

    #1380192
    Elisabeth

    I also realised I had another issue causing problems that had a knock on effect on this problem – I’d set the container width quite wide in the customizer to allow me to have a wide grid partway down some pages which I now no longer need due to project changes). I had therefore set the container block padding to be quite wide so the line length was reasonable for reading. Now that I don’t need the wide container at any stage I’ve reset the container width in the customizer and removed most of the padding from the block itself.

    This means that other than the centering of the image itself whenever there is stacking the whole page works more coherently now.

    I’ve got some CSS in the customizer already to make the image stack so do I just add some ‘centering css’ to this:


    @media
    only screen and (max-width: 767px) {
    .wp-block-image .alignleft,
    .wp-block-image .alignright {
    float: none;
    }
    }

    Thank you as always. Your patient help is very appreciated!
    Elisabeth

    #1380507
    David
    Staff
    Customer Support

    Hi there,

    does this help?

    .wp-block-image {
        text-align: center;
    }
    #1380531
    Elisabeth

    Yep- that’s nailed it. Thank you!

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