Technical Documentation; The content of my code element is bleeding

1

Hi everyone,

I just started building my technical documentation site and I want to use the mobile first approach. However, i’m facing a few challenges.

The content in my code element is bleeding when in a mobile view and I don’t know which properties to apply to make it display in the viewport .

Also I’d like to know if float property is the best option for my hamburger and logo.

Here is my Code

I will be glad to get a solution for this issue. Thanks.

2

Couple things could help here with the bleeding off the sides issue, for one, the spacing matters inside of your pre element, so to avoid the large indent you have you could remove all of the white space caused by the indentation in your html.

Secondly, by default the code in pre tags do not wrap when the parent element gets too small to contain them. You have a few options that I can think of:

  • Make a scroll window to be able to view the runoff on mobile using overflow: hidden on the pre element
  • Lower the font size on smaller viewports to get to your desired width with media queries
  • Make the pre tag wrap, using white-space: pre-wrap on the pre element

I’m not sure if I understand your question about whether float is the best option for the hamburger icon, whatever works for positioning it where you want is probably okay.

1 Like
3

Thanks @Lucasl.

I did as you advised and my page looks better.:+1:t5: