Template:Main Page/styles.css

/* Add or modify these CSS rules to fix responsive issues */

/* Ensure cards remain properly sized on small screens */
@media (max-width: 768px) {
    /* Force single column layout for all grid sections */
    .mp-section-grid {
        grid-template-columns: 1fr;
        gap: 0.8em;
    }
    
    /* Adjust card padding on small screens */
    .mp-section-cell {
        padding: 0.6em;
        margin: 0;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure content doesn't overflow */
    .mp-section-cell h3 {
        font-size: 1em;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    
    .mp-section-cell ul {
        padding-left: 1.2em;
    }
    
    .mp-section-cell li {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    
    /* Fix container padding to prevent overflow */
    #mp-other-content, #mp-sister-content, #mp-tfp {
        padding: 0.5em 0.3em;
    }
}

/* For extremely small screens */
@media (max-width: 480px) {
    .mp-section-cell {
        padding: 0.5em;
    }
    
    .mp-section-cell ul {
        padding-left: 1em;
    }
}