Responsive CSS and SLDS Responsive Design
By the end of this lesson, you'll be able to:
- Recall the SLDS grid system as the primary responsive layout tool
- Use CSS media queries for cases SLDS utility classes don't cover
- Avoid fixed pixel widths that break on small screens
Prerequisites: "supportedFormFactors and the Salesforce Mobile App"
Recap: The SLDS Grid System
Module 9 already covered slds-grid/slds-col and breakpoint-based size classes (slds-size_1-of-1, slds-medium-size_1-of-2) as the primary tool for responsive layout — worth remembering as the first thing to reach for here, not a separate technique.
CSS Media Queries for Custom Cases
/* myComponent.css */
.summary-panel {
font-size: 1rem;
}
@media (max-width: 480px) {
.summary-panel {
font-size: 0.875rem;
padding: 0.5rem;
}
}For styling SLDS doesn't have a ready-made utility class for, a native CSS @media query inside the component's own stylesheet fills the gap — adjusting font size, padding, or layout specifically below a chosen breakpoint.
Avoiding Fixed Widths
/* Avoid */
.card {
width: 800px;
}
/* Prefer */
.card {
width: 100%;
max-width: 800px;
}A hardcoded width: 800px simply doesn't fit on a phone screen — it either overflows or forces horizontal scrolling. Relative units (%, rem) or SLDS's own sizing utilities adapt naturally to whatever screen the component actually renders on.
Why This Matters in Real Projects
A component that looks perfectly fine on a wide desktop monitor can be genuinely unusable — cut off, requiring horizontal scrolling, or with illegibly cramped text — on a phone. This isn't a cosmetic nicety; it directly determines whether the component actually works for a real mobile user (Lesson 1).
Exercise
Rewrite this fixed-width CSS rule to be responsive using relative units.
Show hint
Use width: 100% with a max-width cap.
Exercise
Challenge: explain, as a comment, why a media query is sometimes needed even when SLDS grid classes are already in use.
Show hint
Think about what the SLDS grid utility classes do and don't cover.
Responsive CSS and SLDS Responsive Design Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
The SLDS grid handles most responsive layout needs, native CSS media queries fill in the rest, and avoiding fixed pixel widths is what keeps a component usable on a genuinely small screen.