• Resolved alexdobras

    (@alexdobras)


    As soon as I activate this plugin, the layout on mobile or small screens just breaks, there is overflow on X direction and the scroll bar appears so some buttons cannot be seen unless you scroll to right. That’s really annoying. Please fix that.
    You can try it out on Chrome Inspect & Toggle Device toolbar (Shift+Ctrl+M) and choose Iphone 6 for example.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Is this on the frontend or the admin side that you’re seeing this? If it’s the frontend, then nothing from our plugin should be affecting things. We don’t do any loading of CSS on the frontend. I have also checked and confirmed that our generated CSS doesn’t have overflow set on anything x-direction based. Closest we have is a “visuallyhidden” class that we use for some accessibility.

    Can you provide a link to where you’re seeing the issues?

    Thread Starter alexdobras

    (@alexdobras)

    Sorry, I forgot to mention: the problem seems to appear only on admin.
    I just tried it out on new installation of wordpress locally and the problem still exist on a newly made wp installation only having one plugin: CPT UI ??
    I’m shocked nobody reported it so far :O

    • This reply was modified 6 years, 7 months ago by alexdobras.
    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Since you won’t be able to provide a direct link, can you provide an example screen that you’re seeing the issue on? Say the WP Admin dashboard when mobile? or the General Settings Screen?

    Screenshots can help as well.

    Thread Starter alexdobras

    (@alexdobras)

    Here: this is from another installation, but you can try it out on a new one of your own
    Image one

    image two

    Thread Starter alexdobras

    (@alexdobras)

    Here is a comparison files between Plugin activated (left) and Plugin deactivated (right)
    https://www.diffchecker.com/udYcUPsk

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    So I have managed to recreate the issue, and see an overflow-x: hidden property on the body tag. However, this is not something coming from CPTUI’s css, it’s coming from the common.css file which is part of WordPress core.

    I must admit that I feel that this is not something I think CPTUI should try and rectify or modify. This is more something that should be addressed by the core devs, or at least they should present justification for it. The issue is happening on all post editor screens from my quick testing, not just post editor screens from CPTUI.

    Thread Starter alexdobras

    (@alexdobras)

    Michael, this is caused by CPT UI plugin because if this is not activated, there is no issues with the layout anywhere in WordPress, there is no overflow to be seen. So the problem is with CPT UI, not WordPress.
    PS: to recap: on a website with no CPT UI there is no such kind of problem. This is so unfortunate.

    • This reply was modified 6 years, 7 months ago by alexdobras.
    Thread Starter alexdobras

    (@alexdobras)

    It is true that the issue is happening on all post editor but only after CPT UI plugin is installed.
    Basically using your plugin makes the user experience feel awful on wp admin area on small devices, so you should try to fix that please. I don’t want to uninstall it, i like it so much.

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Hey Alex,

    My apologies, upon some further inspection, it IS something coming from CPTUI, however, it’s not a case of the overflow value, it’s actually from some styles applied to min-width on #poststuff. Until now, we didn’t think our CSS was affecting more than intended, but obviously that’s not the case.

    I have provided some code below to be put in your functions.php that should remove the loading of our CSS on the post editor screens. This is going to be meant as a hotfix, that won’t be needed permanently. I am planning to add a bug issue for CPTUI that will address not adding our css file on all screens, instead limiting to just our specific pages. This will be aimed for 1.6.0.

    function alex_dequeue_cptui_styles() {
    	$current_screen = get_current_screen();
    	if ( ! is_object( $current_screen ) || 'post' !== $current_screen->base ) {
    		return;
    	}
    
    	wp_dequeue_style( 'cptui-css' );
    }
    add_action( 'admin_enqueue_scripts', 'alex_dequeue_cptui_styles' );
    
    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Thread Starter alexdobras

    (@alexdobras)

    great looks like it works with dequeuing the css. Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Layout broken for mobile devices’ is closed to new replies.