Support » Plugin: Gutenberg Blocks - PublishPress Blocks Gutenberg Editor Plugin » Columns layout settings not honoured on mobile

  • Resolved tnightingale

    (@tnightingale)


    There is a “stacked” class being added to the columns manager block on mobile that sets flex-wrap to wrap, even if the side by side layout is chosen for mobile view in the block settings. E.g. I have a columns manager block containing a 2 column block with 1/5 and 4/5 columns that are set to be side by side for all screen sizes, but it stacks the columns anyway, on a mobile phone. Please remove the stacked class when the stacked layout is not selected for mobile. Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi,

    Chan you show me an example of the problem on a page, I don’t fully understand your request?

    Cheers,

    Thread Starter tnightingale

    (@tnightingale)

    The site is not public quite yet but I can send you an example link as soon as it is. Is there a way for me to send you screenshots?

    Yes you can share your screenshot using a specific tool like awesome screenshot or any cloud account like Google Drive to share the image.

    Thanks!

    Thread Starter tnightingale

    (@tnightingale)

    The site is public now so you can see the problem without screenshots.
    https://healthyinternetuse.ca/
    Near the bottom of the home page look at the “We offer” section with the 3 small icons to the left of the paragraphs. These are in a 1/5 & 4/5 column block inside advanced columns manager block. They are set to be side by side at all screen sizes in the block settings (for desktop, tablet, mobile). But on smartphones (and in mobile “responsive design” mode in Firefox developer tools), they are in a single column with the icons above the paragraphs. Using the Inspector tool you’ll see that there is a “stacked” class being added to the container, which implements a flex-wrap: wrap rule and causes the columns to be stacked. That stacked class should not be added; it’s ignoring the block setting for mobile.

    Hi,

    I see that there is stacked class for mobile and so indeed they will stacked on mobile.
    Are you 100% sure you’ve selected the 1/5 + 4/5 for mobile like that:
    https://drive.google.com/file/d/1mI8_3dJpk3WdXbyOHApKx8L1xT9AK3Te/view?usp=drivesdk

    Cheers,

    Thread Starter tnightingale

    (@tnightingale)

    Yes that’s exactly what I’ve selected.

    Thread Starter tnightingale

    (@tnightingale)

    UPDATE – I checked the settings again just now and it was reverted back to stacked for mobile, and no setting at all for iPad (that’s definitely not what I saved previously). I’ve set them all to 1/5 + 4/5 columns (again) for iPad and Mobile and saved, and now it displays properly. Hopefully it’ll “stick” this time. It seems there was a problem with saving the settings. I will check again later today.

    All right that seems more logical, let me know if something goes wrong with the saving. Gutenberg automatic saving is doing some unwanted changes sometimes.

    Cheers,

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Columns layout settings not honoured on mobile’ is closed to new replies.