Grid layout: Container is not read in browser without preceding CSS

Hi all,

My first post so apologies if it is in the wrong place. (This is my first attempt before doing the projects in the responsive web section to see what I remember)

In my browser/ codepen if I do not have preceding CSS before my container class the browser does not read it. Does anyone know why I have this behavior? (You can see this at work with my media query (max-width: 600px) there is preceding classes and the grid is read by the browser): https://codepen.io/tsplewis/pen/xxOKBYX

Thanks for your help in advance :slightly_smiling_face:

@tsplewis, welcome to the forums.
The style elements in codepen will cause problems. They are not required.
The only time you would use the style elements is if you have internal CSS. Since your styling is external CSS remove them.

Also, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

2 Likes

@Roma Thank you for your help. This one had me scratching my head as I created another pen with and it worked. I guess that shows how temperamental it is. I’ll be sure to remove the unnecessary tags.