Photo Embedded in Text cut off on Android Device

[jsternad8018]

I have a photo on my About page. The photo is embedded in the text so that the text could wrap around the photo. Looks great on most screens, but on my Android phone, the photo is cut off.

[christopher]

Hi Justin,

Would you please go to the Text element options that you added the image inside, and select the Customize tab and add the code below to the Element CSS option?

@media (max-width: 680px) {
    $el .x-img {
        margin: 0 0 2.15em 0;
        float: none !important;
        max-width: 100% !important;
    }
}

The code above utilizes the $el placeholder which represents the current Text element and looks for the images inside that element. The reason that the image is not showing correctly on the mobile device is that you added max-width: 300px into the style attribute of the img tag. Adding a fixed value there will cause the image to lose the responsive behavior. The code above overrides that and sets the max-width property to 100%, but it limits the case to the devices with a browser width of 680px or lower which are typically the mobile devices.

I suggest that you read more about the Element CSS feature here.

Meanwhile, if you are interested to know how I found the proper selector for the CSS, I used the Chrome Developer Toolbar which you can learn more about here.

Thank you .

[jsternad8018]

Thank you. That worked.

[ruenel]

You’re welcome!
We’re glad @Christopher were able to help you out.