container.css

harun.bspt2014@gmail.com
I’ll make this as a strong container.css foundation for RX Theme: global container variables, responsive widths, gutters, grid helpers, breakout/full-width utilities, safe padding, and page/content wrappers.

Yes dear friend — for assets/css/static-css/container.css, this file should contain stable static layout CSS only: container width, gutters, responsive wrappers, grid containers, content width, full-width breakout, section spacing, and safe mobile padding.

Use this full advanced container.css:

/* ==========================================================
   RX Theme - Static Container System
   File: assets/css/static-css/container.css
   Purpose:
   - Global container width system
   - Responsive gutters
   - Content wrappers
   - Full width / wide width layout
   - Grid and flex container helpers
   - Section spacing
   - Safe mobile layout
   ========================================================== */


/* ==========================================================
   1. Root Container Variables
   ========================================================== */

:root {
  /* Main site width */
  --rx-container-xs: 360px;
  --rx-container-sm: 540px;
  --rx-container-md: 720px;
  --rx-container-lg: 960px;
  --rx-container-xl: 1140px;
  --rx-container-2xl: 1320px;
  --rx-container-3xl: 1440px;
  --rx-container-full: 100%;

  /* Recommended default */
  --rx-container-width: 1200px;
  --rx-container-wide: 1320px;
  --rx-container-narrow: 860px;
  --rx-container-content: 760px;
  --rx-container-reading: 680px;

  /* Gutters */
  --rx-gutter-xs: 0.75rem;
  --rx-gutter-sm: 1rem;
  --rx-gutter-md: 1.25rem;
  --rx-gutter-lg: 1.5rem;
  --rx-gutter-xl: 2rem;
  --rx-gutter-2xl: 2.5rem;

  /* Dynamic responsive gutter */
  --rx-container-gutter: clamp(1rem, 3vw, 2rem);

  /* Section spacing */
  --rx-section-space-xs: 1.5rem;
  --rx-section-space-sm: 2rem;
  --rx-section-space-md: 3rem;
  --rx-section-space-lg: 4rem;
  --rx-section-space-xl: 5rem;
  --rx-section-space-2xl: 6rem;

  --rx-section-space: clamp(2rem, 6vw, 5rem);

  /* Grid gap */
  --rx-grid-gap-xs: 0.75rem;
  --rx-grid-gap-sm: 1rem;
  --rx-grid-gap-md: 1.5rem;
  --rx-grid-gap-lg: 2rem;
  --rx-grid-gap-xl: 3rem;

  --rx-grid-gap: clamp(1rem, 3vw, 2rem);

  /* Admin bar safety */
  --rx-admin-bar-height: 32px;

  /* Header offset if sticky header used */
  --rx-header-offset: 0px;

  /* Safe area for modern mobile devices */
  --rx-safe-left: env(safe-area-inset-left, 0px);
  --rx-safe-right: env(safe-area-inset-right, 0px);
  --rx-safe-top: env(safe-area-inset-top, 0px);
  --rx-safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ==========================================================
   2. Universal Box Safety
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--rx-header-offset) + 1rem);
}

body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
}


/* ==========================================================
   3. Main Global Containers
   ========================================================== */

.rx-container,
.container,
.site-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-container-fluid,
.container-fluid {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--rx-container-gutter);
}

.rx-container-wide,
.container-wide {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-wide));
  max-width: var(--rx-container-wide);
  margin-inline: auto;
}

.rx-container-narrow,
.container-narrow {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-narrow));
  max-width: var(--rx-container-narrow);
  margin-inline: auto;
}

.rx-container-content,
.container-content {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-content));
  max-width: var(--rx-container-content);
  margin-inline: auto;
}

.rx-container-reading,
.container-reading {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-reading));
  max-width: var(--rx-container-reading);
  margin-inline: auto;
}


/* ==========================================================
   4. WordPress Common Layout Wrappers
   ========================================================== */

.site,
.site-wrapper,
.rx-site {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
}

.site-header,
.rx-site-header {
  width: 100%;
}

.site-main,
.rx-site-main {
  width: 100%;
}

.site-content,
.rx-site-content {
  width: 100%;
}

.site-footer,
.rx-site-footer {
  width: 100%;
}

.content-area,
.rx-content-area {
  width: 100%;
  min-width: 0;
}

.widget-area,
.rx-widget-area {
  width: 100%;
  min-width: 0;
}


/* ==========================================================
   5. Page Layout Containers
   ========================================================== */

.rx-page-container,
.page-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-post-container,
.post-container,
.single-post-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-content));
  max-width: var(--rx-container-content);
  margin-inline: auto;
}

.rx-archive-container,
.archive-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-search-container,
.search-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-author-container,
.author-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}


/* ==========================================================
   6. Article and Reading Layout
   ========================================================== */

.rx-article,
.entry-content,
.post-content,
.page-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.rx-article-inner,
.entry-content-inner {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-content));
  max-width: var(--rx-container-content);
  margin-inline: auto;
}

.rx-reading-width {
  max-width: var(--rx-container-reading);
  margin-inline: auto;
}

.rx-content-width {
  max-width: var(--rx-container-content);
  margin-inline: auto;
}

.rx-narrow-width {
  max-width: var(--rx-container-narrow);
  margin-inline: auto;
}

.rx-normal-width {
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-wide-width {
  max-width: var(--rx-container-wide);
  margin-inline: auto;
}


/* ==========================================================
   7. WordPress Align Support
   ========================================================== */

.alignwide,
.wp-block[data-align="wide"] {
  width: min(100vw - calc(var(--rx-container-gutter) * 2), var(--rx-container-wide));
  max-width: var(--rx-container-wide);
  margin-inline: auto;
}

.alignfull,
.wp-block[data-align="full"] {
  width: 100vw;
  max-width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
}

.alignleft {
  float: left;
  margin-inline-end: 1.5rem;
  margin-block: 0.5rem 1rem;
}

.alignright {
  float: right;
  margin-inline-start: 1.5rem;
  margin-block: 0.5rem 1rem;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.has-global-padding {
  padding-inline: var(--rx-container-gutter);
}

.has-global-padding > .alignfull {
  margin-inline-start: calc(var(--rx-container-gutter) * -1);
  margin-inline-end: calc(var(--rx-container-gutter) * -1);
  width: calc(100% + calc(var(--rx-container-gutter) * 2));
  max-width: calc(100% + calc(var(--rx-container-gutter) * 2));
}


/* ==========================================================
   8. Breakout Layout Utilities
   ========================================================== */

.rx-breakout {
  width: min(100vw - calc(var(--rx-container-gutter) * 2), var(--rx-container-wide));
  max-width: var(--rx-container-wide);
  margin-inline: calc(
    (var(--rx-container-content) - min(100vw - calc(var(--rx-container-gutter) * 2), var(--rx-container-wide))) / 2
  );
}

.rx-full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
}

.rx-safe-full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
  padding-inline: max(var(--rx-container-gutter), var(--rx-safe-left)) max(var(--rx-container-gutter), var(--rx-safe-right));
}

.rx-viewport-width {
  width: 100vw;
  max-width: 100vw;
}

.rx-screen-width {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================
   9. Section Containers
   ========================================================== */

.rx-section,
.section {
  width: 100%;
  padding-block: var(--rx-section-space);
}

.rx-section-sm {
  padding-block: var(--rx-section-space-sm);
}

.rx-section-md {
  padding-block: var(--rx-section-space-md);
}

.rx-section-lg {
  padding-block: var(--rx-section-space-lg);
}

.rx-section-xl {
  padding-block: var(--rx-section-space-xl);
}

.rx-section-top {
  padding-block-start: var(--rx-section-space);
}

.rx-section-bottom {
  padding-block-end: var(--rx-section-space);
}

.rx-section-none {
  padding-block: 0;
}

.rx-section-inner {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}


/* ==========================================================
   10. Flex Layout Containers
   ========================================================== */

.rx-flex {
  display: flex;
  gap: var(--rx-grid-gap);
}

.rx-flex-wrap {
  flex-wrap: wrap;
}

.rx-flex-nowrap {
  flex-wrap: nowrap;
}

.rx-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rx-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-grid-gap);
}

.rx-flex-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--rx-grid-gap);
}

.rx-flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rx-grid-gap);
}

.rx-flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--rx-grid-gap);
}

.rx-flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--rx-grid-gap);
}

.rx-flex-auto > * {
  flex: 1 1 auto;
  min-width: 0;
}

.rx-flex-equal > * {
  flex: 1 1 0;
  min-width: 0;
}


/* ==========================================================
   11. CSS Grid Containers
   ========================================================== */

.rx-grid {
  display: grid;
  gap: var(--rx-grid-gap);
}

.rx-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-grid-gap);
}

.rx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rx-grid-gap);
}

.rx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rx-grid-gap);
}

.rx-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rx-grid-gap);
}

.rx-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rx-grid-gap);
}

.rx-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--rx-grid-gap);
}

.rx-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--rx-grid-gap);
}

.rx-auto-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--rx-grid-gap);
}

.rx-auto-grid-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--rx-grid-gap);
}

.rx-auto-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--rx-grid-gap);
}

.rx-auto-grid-xl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--rx-grid-gap);
}


/* ==========================================================
   12. Blog / Archive Grid Containers
   ========================================================== */

.rx-post-grid,
.rx-blog-grid,
.blog-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--rx-grid-gap-lg);
}

.rx-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--rx-grid-gap);
}

.rx-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--rx-grid-gap-lg);
}

.rx-medical-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--rx-grid-gap);
}


/* ==========================================================
   13. Sidebar Layouts
   ========================================================== */

.rx-layout,
.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rx-grid-gap-xl);
}

.rx-layout-sidebar-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--rx-grid-gap-xl);
  align-items: start;
}

.rx-layout-sidebar-left {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--rx-grid-gap-xl);
  align-items: start;
}

.rx-layout-two-sidebar {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px);
  gap: var(--rx-grid-gap-lg);
  align-items: start;
}

.rx-main-column {
  min-width: 0;
}

.rx-sidebar-column {
  min-width: 0;
}


/* ==========================================================
   14. Sticky Sidebar Safe Container
   ========================================================== */

.rx-sticky-sidebar {
  position: sticky;
  top: calc(var(--rx-header-offset) + 1.5rem);
  align-self: start;
}

.admin-bar .rx-sticky-sidebar {
  top: calc(var(--rx-header-offset) + var(--rx-admin-bar-height) + 1.5rem);
}


/* ==========================================================
   15. Header Container Helpers
   ========================================================== */

.rx-header-container,
.header-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-header-inner,
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-grid-gap);
  min-width: 0;
}

.rx-header-full {
  width: 100%;
  padding-inline: var(--rx-container-gutter);
}


/* ==========================================================
   16. Footer Container Helpers
   ========================================================== */

.rx-footer-container,
.footer-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--rx-grid-gap-xl);
}

.rx-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-grid-gap);
  flex-wrap: wrap;
}


/* ==========================================================
   17. Hero Container Helpers
   ========================================================== */

.rx-hero {
  width: 100%;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.rx-hero-container {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-width));
  max-width: var(--rx-container-width);
  margin-inline: auto;
}

.rx-hero-narrow {
  max-width: var(--rx-container-narrow);
}

.rx-hero-content {
  max-width: var(--rx-container-content);
}

.rx-hero-center {
  text-align: center;
  margin-inline: auto;
}


/* ==========================================================
   18. Medical Website Content Containers
   ========================================================== */

.rx-medical-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--rx-grid-gap-xl);
  align-items: start;
}

.rx-medical-article {
  max-width: var(--rx-container-content);
  min-width: 0;
}

.rx-medical-summary {
  max-width: var(--rx-container-narrow);
  margin-inline: auto;
}

.rx-medical-index {
  width: min(100% - calc(var(--rx-container-gutter) * 2), var(--rx-container-wide));
  max-width: var(--rx-container-wide);
  margin-inline: auto;
}

.rx-disease-grid,
.rx-condition-grid,
.rx-treatment-grid,
.rx-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--rx-grid-gap);
}


/* ==========================================================
   19. Utility Width Classes
   ========================================================== */

.rx-w-full {
  width: 100%;
}

.rx-w-screen {
  width: 100vw;
}

.rx-w-auto {
  width: auto;
}

.rx-max-none {
  max-width: none;
}

.rx-max-xs {
  max-width: var(--rx-container-xs);
}

.rx-max-sm {
  max-width: var(--rx-container-sm);
}

.rx-max-md {
  max-width: var(--rx-container-md);
}

.rx-max-lg {
  max-width: var(--rx-container-lg);
}

.rx-max-xl {
  max-width: var(--rx-container-xl);
}

.rx-max-2xl {
  max-width: var(--rx-container-2xl);
}

.rx-max-3xl {
  max-width: var(--rx-container-3xl);
}

.rx-max-content {
  max-width: var(--rx-container-content);
}

.rx-max-reading {
  max-width: var(--rx-container-reading);
}

.rx-max-wide {
  max-width: var(--rx-container-wide);
}


/* ==========================================================
   20. Margin Auto Helpers
   ========================================================== */

.rx-mx-auto {
  margin-inline: auto;
}

.rx-ms-auto {
  margin-inline-start: auto;
}

.rx-me-auto {
  margin-inline-end: auto;
}

.rx-my-auto {
  margin-block: auto;
}


/* ==========================================================
   21. Padding / Gutter Helpers
   ========================================================== */

.rx-px-gutter {
  padding-inline: var(--rx-container-gutter);
}

.rx-py-section {
  padding-block: var(--rx-section-space);
}

.rx-pt-section {
  padding-block-start: var(--rx-section-space);
}

.rx-pb-section {
  padding-block-end: var(--rx-section-space);
}

.rx-no-gutter {
  padding-inline: 0;
}

.rx-no-section-space {
  padding-block: 0;
}


/* ==========================================================
   22. Gap Helpers
   ========================================================== */

.rx-gap-xs {
  gap: var(--rx-grid-gap-xs);
}

.rx-gap-sm {
  gap: var(--rx-grid-gap-sm);
}

.rx-gap-md {
  gap: var(--rx-grid-gap-md);
}

.rx-gap-lg {
  gap: var(--rx-grid-gap-lg);
}

.rx-gap-xl {
  gap: var(--rx-grid-gap-xl);
}


/* ==========================================================
   23. Overflow Safety
   ========================================================== */

.rx-overflow-hidden {
  overflow: hidden;
}

.rx-overflow-clip {
  overflow: clip;
}

.rx-overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rx-overflow-y-auto {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rx-no-horizontal-scroll {
  max-width: 100%;
  overflow-x: hidden;
}


/* Prevent common media overflow */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}


/* Table safety inside content */
.entry-content table,
.post-content table,
.page-content table,
.rx-article table {
  width: 100%;
  max-width: 100%;
}

.entry-content .table-wrapper,
.post-content .table-wrapper,
.page-content .table-wrapper,
.rx-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   24. Container Query Ready Components
   ========================================================== */

.rx-container-query,
.rx-cq {
  container-type: inline-size;
}

.rx-card-container {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .rx-cq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rx-grid-gap);
  }
}

@container (min-width: 760px) {
  .rx-cq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================
   25. Logical Direction Support
   ========================================================== */

[dir="rtl"] .alignleft {
  float: right;
  margin-inline-start: 1.5rem;
  margin-inline-end: 0;
}

[dir="rtl"] .alignright {
  float: left;
  margin-inline-end: 1.5rem;
  margin-inline-start: 0;
}


/* ==========================================================
   26. Responsive Container Widths
   ========================================================== */

@media (max-width: 1399.98px) {
  :root {
    --rx-container-width: 1140px;
    --rx-container-wide: 1240px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --rx-container-width: 960px;
    --rx-container-wide: 1080px;
    --rx-container-gutter: clamp(1rem, 3vw, 1.75rem);
  }

  .rx-layout-two-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }

  .rx-layout-two-sidebar > :first-child {
    display: none;
  }
}

@media (max-width: 991.98px) {
  :root {
    --rx-container-width: 720px;
    --rx-container-wide: 840px;
    --rx-section-space: clamp(2rem, 5vw, 4rem);
  }

  .rx-layout-sidebar-right,
  .rx-layout-sidebar-left,
  .rx-layout-two-sidebar,
  .rx-medical-layout {
    grid-template-columns: 1fr;
  }

  .rx-sticky-sidebar {
    position: static;
  }

  .rx-grid-4,
  .rx-grid-5,
  .rx-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rx-header-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  :root {
    --rx-container-width: 540px;
    --rx-container-content: 100%;
    --rx-container-reading: 100%;
    --rx-container-gutter: 1rem;
    --rx-grid-gap: 1rem;
    --rx-section-space: 2.5rem;
  }

  .rx-grid-2,
  .rx-grid-3,
  .rx-grid-4,
  .rx-grid-5,
  .rx-grid-6 {
    grid-template-columns: 1fr;
  }

  .rx-flex,
  .rx-flex-between,
  .rx-flex-start,
  .rx-flex-end,
  .rx-flex-row {
    flex-direction: column;
    align-items: stretch;
  }

  .rx-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin-inline: auto;
    margin-block: 1rem;
  }

  .rx-hero {
    padding-block: clamp(2.5rem, 10vw, 4rem);
  }
}

@media (max-width: 575.98px) {
  :root {
    --rx-container-width: 100%;
    --rx-container-gutter: 0.875rem;
  }

  .rx-container,
  .container,
  .site-container,
  .rx-container-wide,
  .container-wide,
  .rx-container-narrow,
  .container-narrow,
  .rx-container-content,
  .container-content,
  .rx-container-reading,
  .container-reading,
  .rx-page-container,
  .page-container,
  .rx-post-container,
  .post-container,
  .single-post-container,
  .rx-archive-container,
  .archive-container,
  .rx-search-container,
  .search-container,
  .rx-author-container,
  .author-container,
  .rx-section-inner,
  .rx-header-container,
  .header-container,
  .rx-footer-container,
  .footer-container,
  .rx-hero-container {
    width: calc(100% - calc(var(--rx-container-gutter) * 2));
  }

  .rx-card-grid,
  .rx-post-grid,
  .rx-blog-grid,
  .blog-grid,
  .archive-grid,
  .rx-feature-grid,
  .rx-medical-topic-grid,
  .rx-disease-grid,
  .rx-condition-grid,
  .rx-treatment-grid,
  .rx-test-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   27. Extra Small Device Safety
   ========================================================== */

@media (max-width: 374.98px) {
  :root {
    --rx-container-gutter: 0.75rem;
  }

  body {
    min-width: 300px;
  }
}


/* ==========================================================
   28. Large Screen Enhancement
   ========================================================== */

@media (min-width: 1400px) {
  :root {
    --rx-container-width: 1240px;
    --rx-container-wide: 1440px;
  }
}

@media (min-width: 1600px) {
  :root {
    --rx-container-width: 1320px;
    --rx-container-wide: 1520px;
  }
}


/* ==========================================================
   29. WordPress Admin Bar Compatibility
   ========================================================== */

@media (max-width: 782px) {
  :root {
    --rx-admin-bar-height: 46px;
  }
}

.admin-bar .rx-fixed-top,
.admin-bar .rx-sticky-top {
  top: var(--rx-admin-bar-height);
}


/* ==========================================================
   30. Print Layout Safety
   ========================================================== */

@media print {
  :root {
    --rx-container-gutter: 0;
    --rx-container-width: 100%;
    --rx-container-wide: 100%;
    --rx-section-space: 1rem;
  }

  .rx-container,
  .container,
  .site-container,
  .rx-container-wide,
  .container-wide,
  .rx-container-narrow,
  .container-narrow,
  .rx-container-content,
  .container-content,
  .rx-container-reading,
  .container-reading {
    width: 100%;
    max-width: 100%;
  }

  .rx-layout-sidebar-right,
  .rx-layout-sidebar-left,
  .rx-layout-two-sidebar,
  .rx-medical-layout {
    display: block;
  }

  .rx-sidebar-column,
  .widget-area,
  .rx-widget-area {
    display: none;
  }

  .alignfull,
  .rx-full-bleed {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

Load it in your theme like this inside your enqueue file:

wp_enqueue_style(
    'rx-container',
    get_template_directory_uri() . '/assets/css/static-css/container.css',
    array(),
    wp_get_theme()->get('Version')
);

Best loading order for RX Theme CSS:

assets/css/static-css/reset.css
assets/css/static-css/root.css
assets/css/static-css/typography.css
assets/css/static-css/container.css
assets/css/static-css/header.css
assets/css/static-css/footer.css
assets/css/static-css/components.css
assets/css/static-css/pages.css
assets/css/static-css/responsive.css

For your RX Theme, container.css should stay static, because container width, gutters, grid layout, sidebar layout, and section spacing are core theme structure. Dynamic CSS should be used later only for admin/customizer-controlled values like theme color, user-selected font, dark mode color, custom header height, or custom container width.

Leave a Reply

Your email address will not be published. Required fields are marked *