Cannot style body in codePen

HTML-CSS
1

Hi all,

I’ve made a burger menu for my portfolio page when at mobile sizes. It animates slides the menu out from the right and slides the <body> off screen to the left (think Facebook app).

Works 100% on local server, however in codePen I cannot seem to style the <body> tag, at least not style the margins. Is there a work around for this?

Link here

2

Settings > HTML > Stuff for <head>
Scroll to the bottom (or anywhere, really) > Add style between <style></style> tags.

Also, you can delete <script src="js/scipts.js"></script> from your html.

1 Like
3

Thanks. Removed the <script> tags.

Fixed the issue by altering the JS to slide the <div> wrapper instead of the body since codePen won’t allow it.

4

Oh, I thought you were just wanting to style the body with CSS. Well, after your last comment, I went back and looked at your original JS code and saw the problem: document.getElementById('body')

body is a tag, not an id. Codepen will in fact allow you to style the body with JS and there are two ways to do it:

  1. getElementsByTagName returns a nodelist of elements with the given tag name. Or you can select an element from the list the same way you would from an array. There should be only 1 body, so get the first and only body tag with document.getElementsByTagName('body')[0]

  2. That’s all good to know, but I’d rather just use the much simpler document.body

Either one will work in place of document.getElementById("grid-wrapper") in your JS code, just fyi.

edit: Ah! I overlooked the most obvious method:

  1. document.querySelector('body')

But still, nothing beats document.body.

1 Like
5

Thanks. I had <body id="body"> on the code I wrote in VS Code obviously missed this when moving it into codePen.

The document.body is indeed very good and I’ll rewrite it with that.

Cheers!