I’ve used additional CSS to indent the heading of a page. On the desktop version this heading goes over one line, and the indent works fine. On the mobile version however, the heading spills over two lines, and what is now the second line of the heading is no longer indented, meaning that the two words are misaligned.
How can I apply the indent to the second word of the heading, so that it’s correctly indented on the mobile version?
Additional CSS used:
.page-id-25892 .content h1 {
line-height: 5rem !important;
text-indent: 40px
}
Thanks!
]]>
@media only screen and (max-width: 767px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float:none;
}
}
Is there a way to make this work, or if not, is there another workaround that will accomplish the same goal?
Thanks!
]]>I have tried customizing Additional CSS mentioned in another thread. I also tried another suggestion found in GitHub issues. In both cases, setting overflow-wrap or word-wrap doesn’t seem to do anything.
How I attempted to solve the issue: in WordPress Editor, I select the code block then go to Block -> Advanced -> Additional CSS Class(es).
Environment:
– Code Syntax Block Version 1.3.0
– WordPress 5.4
Current behavior:
– Long lines of code are extended by a scroll bar. See “Code Block 1” in the sample site URL I attached.
Expected behavior:
– Long lines of code should be wrapped.
How can control the top margin (vertical padding) and spacing between the lines of text as well as wrapping text around images in a box?
When I start typing the text sits in the middle and there is no way I can see to pull it up to the top from the middle position which is not suitable for the design I want.
could you please advise.
]]>I’m guessing that this is going to mean adding support for images embedded in text blocks, and maybe that’s a hassle in the new code base… but hey, MailPoet 2 could do it!
Thanks,
Graham