/* Responsive Styling for all devices */
@media (max-width: 768px) {
.h1, h1 { font-size: 2em !important; }
.h2, h2 { font-size: 1.8em !important; }
.h3, h3 { font-size: 1.4em !important; }
div { padding: 1em !important; }
table, th, td { font-size: 0.9em !important; display: block; width: 100% !important; box-sizing: border-box; }
thead { display: none; } /* Hide table header on small screens */
tr { margin-bottom: 1em; display: block; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
td { border: none !important; text-align: left !important; padding: 0.7em 1em !important; }
td:first-child { background-color: #E0EFFF !important; font-weight: bold; color: #1A2A6C; padding-top: 1em !important; border-bottom: 1px solid #eee !important; }
td:last-child { padding-bottom: 1em !important; }
td:before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.5em; color: #0A6E4F; } /* Add label for each cell */
.infographic-block { flex-direction: column; align-items: center; }
.infographic-item { flex: 1 1 100% !important; margin-bottom: 1em; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.h1, h1 { font-size: 2.2em !important; }
.h2, h2 { font-size: 2em !important; }
.h3, h3 { font-size: 1.5em !important; }
div { padding: 1.5em !important; }
}
/* General styles for headings to ensure proper rendering in block editors */
h1 span, h2 span, h3 span {
display: block; /* Ensures consistent block-level rendering */
}
/* This script is for demonstration purposes to show the H tags in action.
In a real block editor, the editor handles the H tag rendering based on its own CSS. */
document.addEventListener(‘DOMContentLoaded’, function() {
document.querySelectorAll(‘h1’).forEach(function(el) {
el.setAttribute(‘data-label’, ‘H1’);
});
document.querySelectorAll(‘h2’).forEach(function(el) {
el.setAttribute(‘data-label’, ‘H2’);
});
document.querySelectorAll(‘h3’).forEach(function(el) {
el.setAttribute(‘data-label’, ‘H3’);
});
// Add data-label to table cells for responsive display
var table = document.querySelector(‘table’);
if (table) {
var headers = Array.from(table.querySelectorAll(‘thead th’)).map(function(th) {
return th.textContent.trim();
});
table.querySelectorAll(‘tbody tr’).forEach(function(row) {
row.querySelectorAll(‘td’).forEach(function(cell, index) {
cell.setAttribute(‘data-label’, headers[index] + ‘:’);
});
});
}
});