# Responsive Inline Images

## Goals

* Support more responsive inline floating images e.g.
  * float right, 30% max width on desktop
  * float right, 50% max width on mobile landscape 
  * no float, 100% width on mobile portrait 

The goal is to make floating image respond well for mobile devices. 

## Sample Partial Implementation

Here's a sample; 

```html
<style>
@media screen and (max-width: 767px) {
  .w-richtext figure.w-richtext-align-floatright {
    max-width: 50% !important; 
  }
}
@media screen and (max-width: 479px) {
  .w-richtext figure.w-richtext-align-floatright {
    float: none !important; /* Remove the float */
    margin-left: 0 !important; /* Reset the left margin */
    clear: none !important; /* Reset any clearing */
    width: 100%; 
    max-width: none !important; 
  }
}
</style>
```

```html
<style>
figcaption.w-lightbox-caption {
  color: white;
}
@media screen and (max-width: 767px) {
  .w-richtext figure.w-richtext-align-floatright {
    max-width: 50% !important; 
  }
}
@media screen and (max-width: 479px) {
  .w-richtext figure.w-richtext-align-floatright {
    float: none !important; /* Remove the float */
    margin-left: 0 !important; /* Reset the left margin */
    clear: none !important; /* Reset any clearing */
    width: 100%; 
    max-width: none !important; 
  }
}

@media screen and (max-width: 767px) {
  .w-richtext figure.w-richtext-align-floatleft {
    max-width: 50% !important; 
  }
}
@media screen and (max-width: 479px) {
  .w-richtext figure.w-richtext-align-floatleft {
    float: none !important; /* Remove the float */
    margin-left: 0 !important; /* Reset the left margin */
    clear: none !important; /* Reset any clearing */
    width: 100%; 
    max-width: none !important; 
  }
}

</style>
```