So I have a codepen for my technical document, and have a <pre> and <code> code block, but can’t seem to figure out how to center it. I’ve tried putting a div container around the <pre>, as suggested here in this stack overflow discussion:
However, I can’t seem to center this within the container area.
Hi @HanSolo0001,
Have you tried removing the whitespace around the content of <code>? It seems to be centering it for me. Is that what you’re trying to do?
That does solve that issue. However, on mobile view, the text for code examples goes off screen. Why is that?
Mmm, it still seems to be a whitespace issue. I’ve removed it on HTML Elements and it seems to be centered even on a smaller width. I haven’t removed it on the HTML Attributes and it goes off screen.
Elements work, but the long code ones don’t. I tried removing whitespace, and couldn’t get it centered and stay in container.
If I correctly understood your problem, you should remove the text-align: center on your body selector in your CSS file.
Once you did that, you should format your “code” and you should
also remove all the whitespaces inside the pre code HTML blocks.
But I’m having trouble centering that on mobile, or at least getting it to look nice.
Ok, I’ve done some adjusting and I think all things considered I’m happy with what I’ve accomplished for mobile design. What do you all think?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
