Custom Fields
Support MB Views CSS not working for views

  • Creator
  • #32697
    Resolved Kara

    I updated MetaBox this morning (using AIO), and the CSS for MB Views is not working. This is true for all of my MB Views - below is an example. They were all working perfectly before updating.

    The only other plugin I updated this morning was WooCommerce to v 6.0.

    Any ideas?


    One of my MB Views - they are all rendered via shortcode. The html is all correct but no CSS is applied:

    Here's the HTML:

    {% set relationship = attribute( relationships, 'course-products-to-instructors-woo' ) %}
    {% for post in %}
    <div class="row">
      <div class="column1">
        <img src="{{ post.thumbnail.thumbnail.url }}" width="150px" height="150px" />
      <div class="column2">
            {{ post.title }}</h2>
        {{ post.excerpt }}</p>
    <a href="{{ post.url }}" target="blank" rel="noopener"> <span style="font-size:0.8rem;">See full profile →</span></a>
    {% endfor %}

    And the related CSS:

    .row {
      display: flex;
      align-items: center;
      justify-content: center;
    .column1 {
      flex: 50%;
    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        color:#21272A; font-size:2rem !important;
Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
  • #32703
    Long Nguyen


    Where did you implement the CSS code? If it is added in the tab CSS of the View, I see it still works as well.

    Or it is possible that your CSS code has been overridden by the theme or another plugin style.


    Yes - it's in the CSS tab of the View.

    It worked perfectly before updating the MB AIO plugin. I see in the changelog from 12/15 this update:

    1.15.3 - 2021-12-15
    Output CSS in header if possible to make HTML validated

    Is it possible this update is causing the issue?
    I did update to WooCommerce 6.0 at the same time, but deactivating WooCommerce doesn't fix the CSS issue.

    I'd be happy to roll back the version of AIO but my local copy is 1.13.7 - is there somewhere to download previous versions?

    You can view the output here: under the "Instructor" tab. I don't see any of the CSS in the inspector.

    Note this is a dev site.

    Long Nguyen


    You are right, the CSS code is not rendered on the frontend if you use the type: Shortcode. I will inform the development team to check this case and fix it in the next update.


    Great - thanks, Long!

    Do you have an ETA for this fix, or in the meantime, is there a place I can download AIO 1.15.2 until it's available?

    Long Nguyen


    I do not have ETA for this fix, hopefully, it will be available soon. And here is the link to download version 1.15.2
    I will remove it after 2 days.


    Thanks, Long! As always, appreciate your help 🙂


    Thanks for acknowledging it and providing the previous version. I was also surprised by this bug.

    Tim Thomas


    Possibly same issue. just updated metabox and 1 (out of 2) views the CSS is simply not being output. The other view is still working fine strangely.

    There was a warning (missing rbrace) in the css not rendering for the line
    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
    but it was working previously. As other view CSS was still outputting I thought could be due to having the warning on it that you now block the css, but commenting out the line seems this is not the case.

    For now rather than roll-back I've simply prefixed all css in the view with a container class and have added it as a new css file being pulled into the child theme.


    Timo Wessels

    Same with me, having same issues that the CSS Classes are not shown. Thanks for fixing it soon =)

    Long Nguyen


    This issue has been fixed in the new version 1.9.3.


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