Home Forums Backend Issues (wp-admin) Create a flexible content with various widths in the back-end


Create a flexible content with various widths in the back-end

  • Hello,

    I’ve created a flexible content with different layouts.
    Each layout including one custom field.

    Target : I set some width as attributes for each of these custom fields (50%, 100%, 58% (7 col)), but when I switch to a Post (on the back-office), it’s setting the width of this at 100% as it’s the Layout width.
    This is only to make a more intuitive back-office for my customers.

    Do you know if it’s possible to do that ?


    Here’s a screenshot of ACF settings :

  • The width you are setting only affect the width of a field within the layout and it will only effect how all the fields in that layout will look. There isn’t a way to have the layouts themselves have different widths.

  • Ok, it would be great as a future feature then :).
    Thanks for your reply John !

  • Each layout in a flexible content is wrapped in a div with a data attribute data-layout="NAME_OF_LAYOUT".

    You can include a css file for the back-end and set your desired width for the layout like this:

    .acf-flexible-content .layout[data-layout="NAME_OF_LAYOUT"] {
        width: 500px; /* Your desired width */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
  • Hello Thomas,

    Thank you for your advice !
    Just one question though, how can I include this css file for the back-end?


  • Use the admin_enqueue_scripts action like this

    function load_custom_wp_admin_style() {
            wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
            wp_enqueue_style( 'custom_wp_admin_css' );
    add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

    More information you will find in WordPress codex

  • Wow, thanks a lot Thomas.
    It’s working perfectly 🙂 !

    Check this out :

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Create a flexible content with various widths in the back-end’ is closed to new replies.