• Hi,

    The Gutenberg columns have a left margin set in wp-includes/css/dist/block-library/style.min.css:

    .wp-block-column:not(:first-child) {
        margin-left: 32px;
    }

    Unfortunately Astra adds the following CSS inline:

    @media (max-width:782px) {
        .entry-content .wp-block-columns .wp-block-column {
            margin-left:0px;
        }
    }

    This breaks the layout and results – on screen sizes between 600 and 782px – in two columns next to each other without any padding between them.

    What is the inline CSS here for? I don’t see any use case for Astra CSS to interfer with default WordPress columns in the .entry-content div?

    Looks like a bug to me, can you fix it asap please?

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi @nicoter,

    ?Could you please let us know the steps to replicate this on our end? And if you can share with us screenshots for the same, that would be great. I tried this on our end and found a bit different thing with yours. Please refer to this screenshot.
    ?
    ???Kind regards,
    ?Herman ??

    Thread Starter nicoter

    (@nicoter)

    Hi Herman,

    Thanks for taking the time to check on this.

    To replicate this, you need to resize the browser window until it’s between 600px and 782px.

    Please have a look at this screenshot.

    Thanks

    Hi @nicoter,

    This was a bug and has already been fixed in v.2.4.4. This shouldn’t affect the new users. And for the existing users, we provide a filter below, which you can add to your site

    add_filter('gtn_image_group_css_comp', 'col_call_back');
    function col_call_back(){
        return true;
    }

    I hope that will help. Feel free to reach out to us if you have any further queries.

    ??Kind regards,
    ?Herman ??

    ??P.S. We recommend reaching out to us through our Support Portal for faster and quicker help and resolution as mentioned here.

    Thread Starter nicoter

    (@nicoter)

    Hi Herman,

    Thanks for the information.

    I’m on v2.5.4 but the bug is still there. Why is it not fixed on my WordPress although I run a version > 2.4.4?

    Also I’m not following what you mean with new users and existing users? Is my version different to a fresh Astra install although it’s up to date?

    Thanks!

    Hello @nicoter

    As Herman mentioned, if you are using the Astra theme on a fresh installation you wouldn’t face this issue.

    Otherwise, if you are coming from an older version let’s say 2.3.x, and updated to the latest version 2.5.4 you would simply need to use the provided filter. This ensures the existing customers have their existing settings intact.

    While the new users who are using it for the first instance simply do not have to worry about the same.

    # Is my version different to a fresh Astra install although it’s up to date?
    => Well, both are the same. It’s just that we were comparing with the existing users from the new users (who have installed on a new environment).

    I hope that clarifies. Let us know if you have any further queries.

    Regards,
    Suman ??

    Thread Starter nicoter

    (@nicoter)

    Thanks for elaborating on this.

    This information is actually very worrying. It essentially means that on an existing site new fixes and improvements don’t get applies.

    How many other fixes to small issues and bugs have not been applied to my Astra updates?

    Do you have an overview page of all filters that fix bugs for existing users? A Google search for gtn_image_group_css_comp doesn’t show any results.

    Thanks

    Hello @nicoter

    There’s no need to worry.

    What we are trying to say is that, to ensure backward compatibility with the previous settings of the existing users who are already using the same. And if they would like to continue or to migrate to new settings they can use the filter.

    And for the new users, they would not required to make any new changes.

    Here’s an example where we have mentioned the same in our documents.

    As we mentioned previously, the versions are same for all the users.

    You can find all our changes on our changelog – https://wpastra.com/changelog/

    I hope that clarifies. Feel free to reach out to us through our Support Portal if you have any further queries. [ Link here ]

    Regards,
    Suman ??

    supermemo

    (@supermemo)

    Hi.
    Mine is Astra premium v. 3.1.2. Fresh installed on February 2021. This css is still there:
    @media (max-width:782px){.entry-content .wp-block-columns .wp-block-column{margin-left:0px} (you could check by yourself searching within the page’s source view with your preferred browser)
    3 columns that looks great on DT (side to side across the viewport), looks crappy on mobile since bottom edge of the first one overlaps with top edge of the second (below in mobile viewport), an so on. Instead, in tablet viewport, 2 columns remain on one row, separated, but the third get moved below the first one to the left, overlapping themselves long their bottom / top edges.

    web page: mysweetlaura.it/negozio

    Please tell me how to get this things separated, thank you. I can’t find the way to do so with theme / pages settings controls.

    Guillermo

    Hi @supermemo,

    I checked your site using Chrome mobile view and it looked fine on my end I can say. Please refer to this video. Have you fixed it or I am missing something.

    Kind regards,
    Herman ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Astra breaks Gutenberg column block margin behavior’ is closed to new replies.