# Inserting Sitewide CSS into Elements

**URL:** <https://forums.realmacsoftware.com/t/inserting-sitewide-css-into-elements/49477>\
**Category:** Elements\
**Created:** [August 5, 2025, 1:04pm UTC](https://forums.realmacsoftware.com/t/inserting-sitewide-css-into-elements/49477 "2025-08-05T13:04:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [August 5, 2025, 1:04pm UTC](https://forums.realmacsoftware.com/t/inserting-sitewide-css-into-elements/49477/1 "2025-08-05T13:04:30Z")

</div>

Hello, My HTML tables look terrible in Mobile. Asked Chat GPT for a fix:

```css
@media only screen and (max-width: 768px) {table, thead, tbody, th, td, tr {display: block;width: 100%;}

thead tr {
  display: none;
}

tr {
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  padding: 8px;
}

td {
  position: relative;
  padding-left: 50%;
  border: none;
  border-bottom: 1px solid #eee;
}

td::before {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 45%;
  white-space: nowrap;
  font-weight: bold;
}

td:nth-of-type(1)::before { content: "Title"; }
td:nth-of-type(2)::before { content: "Author"; }
td:nth-of-type(3)::before { content: "Publisher"; }
td:nth-of-type(4)::before { content: "Quick Review"; }
}

```

Where do I put this site wide code?

 ![Screenshot 2025-08-05 at 8.01.18 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/e/7eb108980c16458a1983965a3f16f10fdd4b6a87.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 6, 2025, 9:13am UTC](https://forums.realmacsoftware.com/t/inserting-sitewide-css-into-elements/49477/2 "2025-08-06T09:13:29Z")

</div>

Hi @MichaelDroste,

You’ll need to wrap the code in tags and paste it into the head area of your site. Here’s the updated code:

@media only screen and (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; width: 100%; } thead tr { display: none; } tr { margin-bottom: 1rem; border: 1px solid #ccc; padding: 8px; } td { position: relative; padding-left: 50%; border: none; border-bottom: 1px solid #eee; } td::before { position: absolute; top: 8px; left: 8px; width: 45%; white-space: nowrap; font-weight: bold; } td:nth-of-type(1)::before { content: "Title"; } td:nth-of-type(2)::before { content: "Author"; } td:nth-of-type(3)::before { content: "Publisher"; } td:nth-of-type(4)::before { content: "Quick Review"; } }

And paste it anywhere between the `<head> </head>` tags, ideally just before the closing `</head>` tag. See screenshot.

 ![CleanShot 2025-08-06 at 10 .10.09@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/7/1791e043af27129f90066237c1665be0faa03522.jpeg)

Let me know how you get on!