Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image wrap #2

Open
zb100 opened this issue Apr 23, 2021 · 8 comments
Open

Image wrap #2

zb100 opened this issue Apr 23, 2021 · 8 comments

Comments

@zb100
Copy link

zb100 commented Apr 23, 2021

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
Copy link
Author

zb100 commented May 18, 2021

@trendschau do you get this problem as well?

@trendschau
Copy link
Member

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
Copy link
Author

zb100 commented May 18, 2021

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
Copy link
Member

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
Copy link
Author

zb100 commented Jun 4, 2021

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
Copy link
Author

zb100 commented Jul 2, 2021

Just pinging you @trendschau :)

@trendschau
Copy link
Member

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
Copy link
Author

zb100 commented Jul 9, 2021

It works! Thanks a lot :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants