Solved: Image scaling issues in Flex Containers & Export Bug with "img-fluid" class names

I Need Help
1

Hi @Norm, I’ve discovered a significant issue when using images inside Flexbox containers (e.g., centered columns) and how Blocs handles custom classes during export. It’s actually a combination of two problems.

  1. The Initial Problem: Images stuck at Large (LG) dimensions on Medium (MD) screens
    In my layout, I have a row with 3 columns. On Desktop (LG), the images scale perfectly to fit the 1/3 column width. However, when switching to Medium (MD) breakpoints—where the columns stack vertically and should span the full width (12 columns)—the images remained “stuck” at their small Desktop dimensions. They refused to expand to the full width of the MD container, leaving them centered but too small, even though they should have scaled up to fill the 100% width of the stacked column. This happened across all browsers (Safari, Chrome, Firefox).
    Crucial Observation: This issue only occurs on the exported live website (on the server). Inside the Blocs environment, the Blocs Preview, and even the “Preview in Browser” function from within Blocs, everything looks perfectly fine. The layout only breaks after a full export.

img-fluid-class-not-working
img-fluid-class-not-working1500×1080 154 KB

  1. The Required CSS Fix: To force the browser to respect the container width and override the fixed HTML attributes, I needed a custom class, because the standard Bootstrap class …
.img-fluid {
  max-width: 100%;
  height: auto;
}

… was no longer doing what it was supposed to do. So the following CSS fixed the problem for me…

.custom-img-fluid  {
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
   display: block !important; /* to fix inline-block issues within flex containers */
}
  1. The “Naming Bug” in Blocs Export. This is where it gets strange: When I named this class .img-fluid-custom, Blocs seemed to treat it as a duplicate or a variant of the standard Bootstrap .img-fluid class during export.
    The Result: The custom class was stripped from the <img> tag in the exported HTML or replaced by a double img-fluid entry. Consequently, my custom CSS rules never reached the browser.
    The Fix: Simply renaming the class to .custom-img-fluid (changing the prefix) solved the issue immediately. Blocs now recognizes it as a unique class and exports it correctly.
    Conclusion: It seems there is an internal “prefix-matching” or “optimization” logic during export that “swallows” custom classes if they start with e.g. img-fluid.

I thought I’d post this on the forum (rather than as a bug report) since I’ve already found a solution for myself. Maybe it will be helpful to others, too.

2

There is an option in project settings that applies image size tags to images to help with Google page speed scores.

When your exporting, maybe the size is being set at a smaller size based on current available space.

You can either add your own sizes using custom data attributes or disable the option in project settings.

2 Likes
3

Oh, right, I completely forgot about that setting. Yeah, that might help.

1 Like
4

Oh, so I thought “yes, that’s how to improve the Lighthouse/GTMetrix score for images”, so I applied the setting “Automate Image Tag Dimension Attributes”.

image
image534×142 32.5 KB

Everything looks fine in Preview and Preview in Browser(s), but exporting and uploading caused image not to fill the container anymore:

imagevs. how it should be: image…

I guess that’s to be expected, then. So I can’t have both good Lighthouse score on this issue and have the image being fluid? (I guess in reality it makes little difference, as the container size doesn’t change, so I should just ignore the Lighthouse score …) :thinking: :sweat_smile:

5

You can just set the size attribute manually for problematic items that may have a smaller fixed size when they are exported from Blocs.

When this option is enabled, it gets the current display size of the image within Blocs and sets the width / height html tag to that. Once outside of Blocs you may find this size is too small for some scenarios (wider / narrower screens - depending on how your layout collapses).

Add a custom data attribute for width and height to problematic items, Blocs will then skip these as they already have html tag values.

Don’t use the inspector (sidebar) settings they apply size using css not the html tag.