Breakpoints for EnergyGov Responsive Design
Energy.gov Homepage - 3-Up:
| Device Type | Breakpoints Min PX Width | Breakpoints Max PX Width | Results |
| Large Desktop | 1415px | Infinite | The Featured Items area fills the full 1400px width of the main content area, with a height of approximately 725px. The first featured item should be around 800px by 725px (taking up 60% width of the area) while the second and third featured items should be around 560px by 362px, stacked on top of each other. |
| Small Desktop | 1240px | 1415px | The featured items maintain width ratios of 60:40, and the same height of approximately 725px. As the browser window reduces in width this will result in them appearing narrower and narrower. |
| Large Mobile | 742px | 1240px | Featured items maintain the same width ratio and height setting, with reduced font sizes. |
| Small Mobile | 0px | 742px | Featured Items stack, taking up the full browser width. The first featured item maintains a taller height than the others for prominence, while the second and third revert to a reduced height. |
Primary Site Homepage - 3-Up
| Device Type | Breakpoints Min PX Width | Breakpoints Max PX Width | Results |
| Large Desktop | 1415px | Infinite | The Featured Items display offset of the gray "fractured" field, with the gray approximately 1415px wide. From the far left of the first featured item to the far right of the last two should span approximately 1200px, with the first featured item taking up 64% of the width and the other two taking up 33%. This leaves room for the gaps and the shadows. The first Featured Item, at full size, is approximately 800px wide by 525px tall; the second and third areboth 410px wide by 242px tall. |
| Small Desktop | 1240px | 1415px | While maintaining the same margins, the reducing width of the screen will result in the featured items also narrowing in width while maintaining the same ratio of approximately 66:33. |
| Large Mobile | 742px | 1240px | Text sizes are reduced on all featured items, and the margins to the left and right of the Featured Item area is reduced to around 15px. |
| Small Mobile | 0px | 742px | Featured Items stack on top of each other, maintaining the same heights from above, but stretching to fill the screen width (with room for |
Nested Site Homepage - 4-Up
| Device Type | Breakpoints Min PX Width | Breakpoints Max PX Width | Results |
Large Desktop | 1415px | Infinite | Main image displays at full width, 1200px, with a height of 600px |
| Small Desktop | 1240px | 1415px | Main image fills browser width, growing and shrinking with resizing, with a margin of approximately 60px to either side |
| Large Mobile | 742px | 1240px | Text sizes of the titles of all Featured Items reduce a bit; margins reduce to around 20px |
| Small Mobile | 0px | 742px | Featured items all stack to a single "column"; the background image appears exclusively behind the top item. All featured items continue to fill the browser window |