Image Alignment on Rich Text Figures

Design help General
1

Hello -

I’m working with the rich text element in CMS. When insert an image and wrap text around it, the left/right margin won’t turn off on mobile, causing an indentation.

Whenever I look at the margin setting on mobile the value is already set to 0, although I know it’s inheriting the 15px set on desktop so text doesn’t touch the image.

Here is my site Read-Only: https://preview.webflow.com/preview/jg-pixel?utm_medium=preview_link&utm_source=designer&utm_content=jg-pixel&preview=2dde01ac991f4f79556805b22957c0b1&pageId=5d265cc5c7f84c6632ee2192&mode=preview

41%20PM
41%20PM1034×1108 261 KB

2

Hi,

I don’t use a lot webflow rich-text alignments (Because this is no so responsive).
Webflow core-styles add this left margin.

For now, no way to solve this beside custom code (Add this code - before head - publish and test on mobile):

Remove the L-margin in all breakpoints:

<style>
.w-richtext figure.w-richtext-align-floatright {
    margin-left: 0px;
}
</style>

Remove the L-margin on mobile portrait only:

<style>
@media only screen and (max-width: 479px) {
  .w-richtext figure.w-richtext-align-floatright {
      margin-left: 0px;
  }
}
</style>

Remove the L-margin on mobile portrait & landscape only:

<style>
@media only screen and (max-width: 767px) {
  .w-richtext figure.w-richtext-align-floatright {
      margin-left: 0px;
  }
}
</style>

image
image1027×712 162 KB

3

This worked perfect.

Appreciate your help!