Image wrap

[zb100]

When I insert an image and add {.right} it works perfectly on desktop but on mobile it wraps in a wrong way - a small portion of the text comes above the image. Is there a way to fix this?

[zb100]

@trendschau do you get this problem as well?

[trendschau]

sorry @zb100 but I lost this issue somehow ...

I tried to reproduce this error but it looks fine on my test installation, so I suppose it is a special combination in your case. Do you have a link for me? And did you add any custom css that might cause this behavior?

[zb100]

No problem at all. The link is here. The only custom CSS I have is this:

/* fonts */
.sans-serif { font-family: -apple-system,BlinkMacSystemFont,"Helvetica",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; text-rendering: optimizeLegibility; }
.fw4{ font-weight: 400; }
.font-lead{ font-size:1rem; }
.lh-lead { line-height: 1.6rem; }
.font-copy{ font-size: 1rem; }
.lh-copy{ line-height: 1.4rem; }

Cache-Control:public

[trendschau]

hm, I stiill cannot reproduce it, I tried with firefox mobile emulator and with my android smartphone. Both looks fine. In some cases/screensizes it might happen that a small portion of the text floats left to the image which does not look nice, but it does not go above the image in my test cases.

Which device do you use for testing?

Maybe it makes sense to set float to none for small screens and to add the float only for larger screens, so something like this in your custom css:

figure.right {
    width: auto;
    float: none;
    margin: auto auto;
}
@media (min-width: 40em) {
	figure.right {
    width: auto;
    float: right;
    margin: 0 0 20px 20px;
}
}

Does it solve your problem? Then I could add it as general solution for the next version

[zb100]

Sorry for the slow reply - and thanks for the support! I am using an iPhone. You are quite right, it does not actually go above the image, it is floating to the left. I should have been clearer. I tried the custom css but the problem persists (probably because I should've said 'floats to the left' as opposed to 'above'). Do you think there's a way to fix this?

[zb100]

Just pinging you @trendschau :)

[trendschau]

sorry for the delay, you have that "Cache-Control:public" in your css-style which is not valid css so it breaks the following rule. Can you simply delete that line from your custom css and then check again? For me locally it works wiith exactly the same content.

[zb100]

It works! Thanks a lot :)