Row Layout – Two Column Grid not working

  • Resolved Sebastian

    (@imcube7)


    5 years ago

    Hi!

    I think there is a problem with the “Two Column Grid” Layout available in the tablet layout settings of the Row Layout Block.

    I added a Row Layout with 4 columns set to align full with a Content Max Width of 1180px set in the Structure Settings. For test purposes I placed a square image (480 x 480 px) in each column.

    The desktop view is correct, showing 4 images next to each other inside the 1180px content container. Then, when the viewport gets narrowed down the layout changes to tablet view at 1024px. The images are placed in a 2×2 layout, but the layout is suddenly not centered anymore, appearing moved to the left, so the two images on the left get cut off a little. Content padding on the left and right seem to be missing.

    When further narrowing down the viewport the layout changes to mobile view at 768px as expected. In this view the four images don’t act “responsive” with the expected “width: 100%; height: auto;” behavior. The images stay at 480×480 leaving a gap on the right. Even if this behavior is intended I think it would be best to center align the images.

    The main problem for me is the “broken” tablet view with the “Two Columns Grid” setting. On another project with four Info Boxes inside the columns the layout gets even more messed up, breaking out of the viewport with, de-centering the whole website layout and showing a horizontal scroll bar.

    I am using WordPress 5.3, Gutenberg 6.9.0, Kadence Blocks 1.7.6 with the GeneratePress Theme 2.3.2 on the latest version of Chrome under macOS.

    I took screenshots that further try to explain the problem:
    https://www.dropbox.com/s/t0mbivmseb3o9oh/kadence-2-col-grid-problem.pdf?dl=0

    I don’t know if this is a bug, or I missed something during the configuration of the Row Layout.

    Thanks for your feedback in advance!

    Sebastian

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Hey

    1. Any chance you can send a link where it shows your issue with the columns in 2 grid?

    2. The inside blocks are not controlled by the row block, Meaning the row block wouldn’t/shouldn’t define if the image you place inside the column should be center or left-aligned. Or if the image should stretch to a specific size. You would control those kinds of settings within the image block itself.

    Ben

    Thread Starter Sebastian

    (@imcube7)

    Hi Ben!

    Okay, I’ll setup a test environment and post a link soon. The above mentioned experiences were made on local installations.

    Thanks for clarifying the part with the images inside the columns. This was just something that I noticed “along the way” ??

    I’ll keep you updated with a link to the test installation!

    Sebastian

    Thread Starter Sebastian

    (@imcube7)

    Hi Ben,

    here’s the link to the test environment: https://www.imcube7.de/_dev/test/

    I couldn’t replicate the problem with the de-centering of the layout so that seem to be a problem with the other installation or the combination with other blocks on the page.

    But what you can see in the test setup is that the tablet layout at the breakpoint of 1024 px is not correct, with a big gutter in the middle and the images overlapping the side padding left and right, completely losing side padding at 980 px.

    At the mobile breakpoint at 767px the layout is correct again with images respecting the side padding.

    Sebastian

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    I can’t see anything at that link? Is it closed out?

    Ben

    Thread Starter Sebastian

    (@imcube7)

    Okay, you were too fast for me. Right after posting I realized, that I still had my maintenance plugin active. Please check the site again.

    Sebastian

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Your images are still pointing to a local host.

    Ben

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    In your row layout, you’ve set the tablet padding left and right to be 0.

    Ben

    Thread Starter Sebastian

    (@imcube7)

    I just tried to setup a “fresh” row layout with online images and without making any changes to the padding settings and it’s working perfectly fine and as expected.

    I have to double check the settings in my local installations.
    Sorry for the inconvenience and thank you very much for your support!

    Sebastian

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Row Layout – Two Column Grid not working’ is closed to new replies.