• analiaserafiniv

    (@analiaserafiniv)


    I have a problem when I use the File Block.
    I’m sharing a page:
    When I save the page, the button and title align to the right.

    • This topic was modified 4 weeks ago by t-p.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter analiaserafiniv

    (@analiaserafiniv)

    I’m sharing another page with you because I changed the previous one: https://prueba12014.wpcomstaging.com/featured-image/.”

    Moderator bcworkz

    (@bcworkz)

    It’s likely due to your theme’s lack of proper styling for these elements. It’s difficult to say since your CSS has been optimized in way that obscures its true source.

    You can patch your theme’s lack by adding your own CSS to the Additional CSS section of the customizer or style book. For example:

    .wp-block-file {
        flex-direction: column;
    }

    You can further style the elements as desired, for example:

    .wp-block-file a {
        text-align: center;
    }
    Thread Starter analiaserafiniv

    (@analiaserafiniv)

    I would like the link and the button to be side by side, like the default design. Is that possible?

    Moderator bcworkz

    (@bcworkz)

    I’m unsure what the default design looks like, but I’ll take a guess.

    Change flex-direction property from column to row and add the following below it:
    flex-wrap: wrap;

    Then add:

    .wp-block-file a:nth-of-type(1) {
        flex-grow: 2;
    }

    This makes the caption bigger than the button.

    Keep the text-align styling. You can fiddle with flex-grow properties and nth-of-type (1 or 2) to get the relative proportions as you prefer. Your browser’s element inspector tool can help you determine the right values to use. Any changes in the tool will appear immediately on the page. Changes in the tool will not persist, copy the desired rules to Additional CSS for persistence.

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