[Support request] image displays outside of container

Home Forums Support [Support request] image displays outside of container

Home Forums Support image displays outside of container

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1971163
    Robert Holland

    Folks: if you take a look at this page https://authorrobertholland.com/the-sleeping-city-exits-the-cape-of-orion/ you will see the image hanging below the container like a painting on the wall. This defeats the purpose of having black as the color for the background of the container. I search and search using different wording and find nothing in your support pages. Is this a bug?

    #1971168
    Ying
    Staff
    Customer Support

    Hi Robert,

    GB containerblock is built using Flexboxstructure while the media and text block is built using Floatstructure, they are not compatible in some way.

    It’s better to use containerblock with other GB blocks or simple WP blocks like imageblock and paragraphblock.

    The layout you are trying to achieve can be easily done with Gridblock of GenerateBlocks.
    https://docs.generateblocks.com/article/grid-overview/

    You can add an image block to the left containerunder Gridblock, and add text to the right container.

    Hope that’s helpful!

    #1971262
    Robert Holland

    Ying, are you telling me that the List View of Generate Blocks uses default WordPress blocks, because I just rebuilt a new page using Generateblocks List View by choosing the blocks it provides — container — image — paragraph — paragraph, all in one container, and it still does this weird behavior (See code below).

    Moreover, I cannot use the Generateblocks grid because the text will not wrap the art. I have ALSO TRIEN Generateblocks GALLERY, and it will not work

    Here is a new page I just built using every single one of the block provided by Generateblocks List View. Here is the new URL. As you can see (if you look), it still blows up. In addition, I even tried a negative values of -2,000 for the bottom margin of the container.

    https://authorrobertholland.com/cutaway-of-xiangbhala-surrounded-by-the-outer-city/

    Here’s the code view of this page.

    <!– wp:generateblocks/container {“uniqueId”:”92f0b000″,”borderSizeTop”:”2″,”borderSizeRight”:”2″,”borderSizeBottom”:”2″,”borderSizeLeft”:”2″,”borderColor”:”#0693e3″,”backgroundColor”:”#000000″,”isDynamic”:true} –>
    <!– wp:image {“align”:”left”,”id”:931,”sizeSlug”:”large”,”linkDestination”:”none”} –>

    <figure class=”alignleft size-large”></figure>

    <!– /wp:image –>

    <!– wp:paragraph {“align”:”left”} –>
    <p class=”has-text-align-left”>Cutaway of XiangBhala and the Outer City industrial complex parked inside the vast Caverns of Orion (beneath the Cape of Orion) showing how The Sleeping City exits through a vast tunnel beneath the surface of the ShenLan Sea in order to escape detection during launch from orbit.</p>
    <!– /wp:paragraph –>

    <!– wp:paragraph {“align”:”left”} –>
    <p class=”has-text-align-left”>Notice how the Woodland Forest Level lies at sea level allowing access to a littoral, underground sea cave where sea lions abound as a source of protein for the inhabitants, as well as fishing from the beach of the sea cave whenever XiangBhala is occupied but not deployed for planetary defenses. This allows The Sleeping City to surface from the ShenLan Sea wherever the Guardian Dragons choose thus avoiding detection by warring spacecraft in orbit around Janaidar before XiangBhala is prepared for battle.</p>
    <!– /wp:paragraph –>
    <!– /wp:generateblocks/container –>

    #1971279
    Robert Holland

    I just built a new page and the image still hangs past the container.

    https://authorrobertholland.com/the-sleeping-city-exits-the-cape-of-orion/

    I even rebuilt the *.webp image in GIMP and uploaded it again.

    Is the image block supplied by GenerateBlocks List View a WordPress block, or GenerateBlocks?

    #1971330
    Elvin
    Staff
    Customer Support

    Hi Robert,

    The issue you’re having is because the image is set to float left. This effectively removes the element from the normal flow of elements.

    Know more about it here – https://stackoverflow.com/a/32301823

    You can try setting display: flow-root;, but if you wish to keep Internet Explorer support, that won’t work. You may have to go with the good old clearfix hack which is basically adding an empty element on the bottom of the container w/ the float element and set its CSS to clear: both;

    A wise man once said:
    "Have you cleared your cache?"

    #1971467
    Robert Holland

    Elvin: I added a container below the container — nothing. And I don’t have any elements in the elements folder of the website. Not sure what elements even are, sorry.

    And I’ve tried this approach on some of my other pages but to no avail — the problem is persistent. I also read the suggested info on stack overflow, but it’s over my head. I am not sure where to place the Clear: both; snippet.

    Here is the problem. I need excerpted text from the new mega-novel to wrap above, to the side, and under the images no matter the size of the image or length of the excerpt. Worse, other pages are giving me this same headache. Other WordPress and YouTube sources made it clear that in order to have text [as paragraph blocks] wrap the image, the image need only be set to left align.

    So, is there CSS I can put into Appearance – Customize – Custom Additional CSS for the entire site (?) that will fix this bug for al the pages? If not, I may be forced to drop GeneratePress and GenerateBlocks because of time. I simply cannot burn day after day after day chasing bugs in what is purported to be a basically WYSIWIG theme paradigm. And this makes me very upset. I’ve got 100s of hours into this website because GeneratePress does not have an author template site.

    In the page code below https://authorrobertholland.com/the-sleeping-city-exits-the-cape-of-orion/, I added the container and placed Clear: both; in the Advanced Additional CSS class(es) box but that was just a shot in the dark.

    <!– wp:generateblocks/container {“uniqueId”:”128ca469″,”borderSizeTop”:”2″,”borderSizeRight”:”2″,”borderSizeBottom”:”2″,”borderSizeLeft”:”2″,”borderColor”:”#0693e3″,”backgroundColor”:”#000000″,”isDynamic”:true} –>
    <!– wp:image {“align”:”left”,”id”:1070,”width”:512,”height”:768,”sizeSlug”:”large”,”linkDestination”:”none”} –>

    <figure class=”alignleft size-large is-resized”></figure>

    <!– /wp:image –>

    <!– wp:paragraph –>
    <p>Cutaway of XiangBhala and the Outer City industrial complex parked inside the vast Caverns of Orion (beneath the Cape of Orion) showing how The Sleeping City exits through a vast tunnel beneath the surface of the ShenLan Sea in order to escape detection from orbit.</p>
    <!– /wp:paragraph –>

    <!– wp:paragraph {“align”:”left”} –>
    <p class=”has-text-align-left”>Notice how the Woodland Forest Level lies at sea level allowing access to a littoral, underground sea cave where sea lions abound as a source of protein for the inhabitants, as well as fishing from the beach of the sea cave whenever XiangBhala is occupied but not deployed for planetary defenses. This allows The Sleeping City to surface from the ShenLan Sea wherever the Guardian Dragons choose thus avoiding detection by warring spacecraft in orbit around Janaidar before XiangBhala is prepared for battle.</p>
    <!– /wp:paragraph –>
    <!– /wp:generateblocks/container –>

    <!– wp:generateblocks/container {“uniqueId”:”249384d8″,”innerContainer”:”full”,”isDynamic”:true,”className”:”clear: both;”} /–>

    Thanks for your support.

    #1971470
    Elvin
    Staff
    Customer Support

    clear:both; is a CSS property applies to an element. ๐Ÿ™‚

    Try adding a custom HTML block with this HTML tag directly after the last paragraph block on the same container.

    <div style="clear: both;"></div>

    Expected result- https://share.getcloudapp.com/qGuRDm47

    Alternatively, you can try adding display-flow on the Container Block’s Additonal CSS class(es) field.

    You then add this CSS:

    .display-flow .gb-inside-container {
        display: flow-root;
    }

    Here’s the expected result – https://share.getcloudapp.com/v1ujmpzq

    A wise man once said:
    "Have you cleared your cache?"

    #1977202
    Robert Holland

    Elvin, you rock! The first suggestion of short code tag inserted into a Custom HTML block under the last paragraph of the webpage does the trick.

    Thanks…. ‘:D

    #1977230
    Elvin
    Staff
    Customer Support

    No problem. Glad you finally got it sorted. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

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