/* ===================================================================
 *
 * This is CSS code for the GRID definitions.
 *
 * $Id: responsive.css,v 1.7 2024/12/27 20:18:43 dlc Exp $
 *
 *
 * ================================================================ */

/* ===================================================================
<div class="container">
    <!-- Image Example -->
    <img src="image.jpg" class="responsive-content" alt="Responsive Image">

    <!-- Table Example -->
    <table class="responsive-table">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <!-- Add more rows as needed -->
    </table>

    <!-- Text Example -->
    <div class="responsive-text">
        <p>This is some text content that should resize based on the container.</p>
        <!-- Add more paragraphs as needed -->
    </div>
</div>
 ================================================================== */

/* ================================================================ */
.container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 640px;
    padding: 0px
    border: 3px solid #ccc; /* Just for visualization */
}

.responsive-content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Maintains the aspect ratio of images */
}

.responsive-table {
    width: 100%;
    overflow-y: auto; /* Adds vertical scrolling if the table is too long */
}

.responsive-text {
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Adds vertical scrolling if the text is too long */
    padding: 10px; /* Adds padding for better readability */
    box-sizing: border-box;
}
/* ================================================================ */

/* ===================================================================
 *
 * $Log: responsive.css,v $
 * Revision 1.7  2024/12/27 20:18:43  dlc
 * During testing of InitialCode.
 *
 * Revision 1.6  2024/12/24 15:45:01  dlc
 * Added to linkset-content, et al.
 *
 * Revision 1.5  2024/10/30 15:51:27  dlc
 * Hybrid/three-step seems to be working.
 * Changes to CSS and JS to assist.
 *
 * Revision 1.4  2024/10/29 17:42:20  dlc
 * Fixed some spacing issues, etc.
 *
 * Revision 1.3  2024/10/29 17:37:06  dlc
 * Fixed some spacing issues, etc.
 *
 * Revision 1.2  2024/10/29 16:38:05  dlc
 * Added documentation showing how to use it.
 *
 * Revision 1.1  2024/10/29 16:31:46  dlc
 * Added responsive.css to the mix.
 *
 ================================================================== */