NO BUG: Figure element in Builder Edit does not show default margin

Browser: Chrome 110
OS: Windows
URL: Local page

When adding an image inside div element set to , the builder does not show the default margin, but viewing the page on the frontend shows this padding.

The first screenshot shows the editor with the three images in the centre set as figures. The second screenshot shows the frontend with the default margin reducing the size of the images.

By adding Margin: 0; to the figure fixes the problem.

Hi Pete,
Thanks so much for your report!

Unfortunately, I cannot reproduce the problem. Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

Best regards,
timmse

I’m not sure why, but this is working as expected now.

There were probably still some old styles in some cache somewhere :slight_smile:
I’m glad it’s sorted!

I thought this was working, but I seem to get different results locally than remotely.

I’ll send you some login credentials.

Pete

Timmse, did you get the login details?

Regards

Pete

Unfortunately, I can’t find an email from you. Please try again.

Hi Pete,
Thanks for the login details.

Your “custom” figure tag causes the problem. You are using a div whose HTML tag you changed to figure. There is nothing wrong with that in general, but then the standard figure margin is applied – even if we wouldn’t define it (browser default).

If you use an image element instead and choose figure there, the problem does not occur because we set the margin for figure.brxe-image to 0.

You could do exactly the same for figure.brxe-div (i.e., your “custom” figure tags), e.g., in the Bricks settings, your child theme, or in the stylesheet settings of the theme styles.

All in all, it’s still not a bug, but a custom setup that requires some additional tweaking.

Thanks so much for this, I didn’t realise that changing an img to a figure wrapped the img in a figure, I thought I had to wrap it myself. You learn something new every day.

No problem, I’m glad we were able to solve the puzzle :v:

Sorry, but I just realised that changing a img to a figure doesn’t allow me to add css to the figure and image separately.

Well, you can still use custom CSS to target the figure and the img separately. Or you can stick with the custom figure tags and take care of the margin problem—the choice is yours.