Enhancing Media Embedding and Alignment in W3CSS Theme for Drupal

Thank you for bringing this topic to my attention. The media module was not implemented in the theme yet. I have added a new Twig template for embedding media content within text fields. This new template ensures that your media content is styled beautifully and consistently when inserted into text areas.

The work was pushed to the W3CSS Theme → .

Best wishes,
Alaa

Thanks for quick response!

I installed dev version of w3css theme (dev-2.x 1411a90), but it is still bad aligned and bad wrapped :(

Hello,

Please ensure that you clear your caches and verify the presence of ../d8w3css/css/components/embedded-media.css. I have tested the functionality, and it is working on the demo site https://amun.flashwebcenter.com/page/introducing-solo-third-generation-w....





Best wishes,
Alaa

I disabled custom css (checkbox), flushed cache (on performance page) and force refresh page. It's same.

find . -iname "embedded-media.css"
./web/themes/contrib/d8w3css/css/components/embedded-media.css
./web/core/themes/olivero/css/components/embedded-media.css

composer show drupal/* |grep d8
drupal/d8w3css dev-2.x 1411a90 Speed, Elegance & Ease of Development and Use

P.S. Custom css disabled in Amun V2 Theme settings. There is no custom css in W3CSS Theme V2.

Hello,

It appears there might be a CSS conflict that is overriding the default settings if your site is not behaving like the demo site. Without a URL, I am unable to inspect the page and identify the conflict. If you cannot provide a URL, I recommend comparing your site to the demo site and following the differences to pinpoint the issue.

Best regards,
Alaa

Automatically closed - issue fixed for 2 weeks with no activity.

Hello.

I'm sorry for late response (holidays).

Tried some upgrade/downgrade of d8w3css and upgrade anything else. Still not right aligned (like center).

There are some custom css, but tested with disabled custom css and deleted custom css too.

URL is https://www.stinadla.net/picture-align-test

If I disable "float: left" for .node .field--name-field-image, .node .field--name-field-media-image (d8w3css/css/components/default-node.css?si9c7l), align is fine.

No problem, and happy holidays!

I looked into the link and found that the default style for the image/media field had a left float. This style should only apply to images or media outside of any text fields. I've updated the CSS to ensure that this styling now only applies when these fields are direct children of the node content.

The work was pushed to the W3CSS Theme Dev → .

Best wishes,
Alaa

It's fine now. Thanks for your great themes and (also quick) support!

You’re welcome; I’m glad it worked out.