• Hello,

    I’m looking for a solution to the following problem: In the mobile view (smartphone), the wp-block-media-text is displayed with far too much border.

    How can I remove the border in the mobile view, it doesn’t need a border.

    1. No border around wp-block-media-text block.
    2. No margin left and right in the text area.

    It would be wonderful to find a solution here.

    Thanks very much!
    Klemens

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    I assume you mean the white space is excessive. “Border” in CSS means something else, more akin to an element’s outline. The spacing between blocks is governed by margin-bottom:. The side margins are governed by width and padding rules of a number of different div containers.

    Place this code in the customizer’s Additional CSS section:

    @media screen and (max-width: 600px) {
      .wp-block-media-text {
        margin-bottom: 0;
      }
      .wrapper {
        width: 100%;
      }
      .site-main {
        padding: 15px 0;
      }
      #primary #main > article {
        padding: 50px 0;
      }
    }

    If you want to further fine tune things, use your browser’s element inspector tool to try out different (or new) CSS values. Anything changed in the tool will not persist. For persistence, copy the changed rules to Additional CSS.

    For example, if this were my site, I’d leave a small bottom margin so it’s clear which image belongs with which text. You can try out different values like 5px; in the element inspector tool.

    Thread Starter iamklemens

    (@iamklemens)

    Hello
    and thanks for the help!

    So far it looks very good, now I only have the problem with the INLINE styles, how or where can I change them?

    <div class="is-layout-flow wp-block-group" style="padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em">

    Kind regards!
    Klemens

    Moderator bcworkz

    (@bcworkz)

    Element style attributes cannot be overridden with other CSS, except by JavaScript after page load. To correct undesirable styling before then you need to alter it at the source. Determining the actual source in a CMS generated page can be a challenge. Good places to check are the source HTML within the editor and the theme template responsible for the page output. If it’s not in one of those, finding the source will indeed be a challenge.

    I know I’m being pedantic here, but your example styling is an element style, not inline style. Inline styles are those on the page within <style> blocks. I too referred to element styling as inline for a long time before someone kindly set me straight.

    Thread Starter iamklemens

    (@iamklemens)

    Thank you for the feedback!

    Thanks for the tip about inline style, I’ve been programming “alone” for many years and it’s hard to get the technical terms right ??

    I’m surprised other people haven’t had this problem with the text-media-block. I already went through the complete code of WP before I posted here. But that’s also the beauty of programming – it’s a quest for the impossible!

    I’ll report as soon as I’ve found a solution.

    Kind regards!
    Klemens

    Moderator bcworkz

    (@bcworkz)

    Those element styles appear to be a result of either your theme, or possibly FSE. With the Twenty Twenty-one theme such a block has no element styles. All block styling options from the editor are accomplished by element classes. If the issue is limited to your theme, it would significantly reduce the number of people encountering such issues.

    I’ve been programming “alone”

    That was my excuse when I was so informed as well! ??
    I hope you can find a solution soon, good luck!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Media and text block – Mobile view – Smartphone’ is closed to new replies.