Responsive Breakpoints and Layout Logic
How Blaskan's responsive layout works across the three primary breakpoints, and what changes at each screen size.
Blaskan uses three primary breakpoints to adjust its layout. Understanding where these breakpoints sit and what changes at each helps you anticipate how content will display across devices.
The Three Breakpoints
Below 640px (mobile): Single-column layout. The sidebar does not appear. Navigation collapses to a toggle. All content including headings, images, and tables renders within the full viewport width minus standard margin. Featured images scale to fill the content width.
640px to 959px (tablet / mid-range): A transitional range. The primary content column is wider than mobile but the sidebar is still suppressed in most page types. Navigation may expand depending on the number of menu items. Tables with many columns may begin to overflow and scroll horizontally.
960px and above (desktop): The full two-column layout activates. The main content column and sidebar render side by side. The header displays the full navigation inline. This is the canonical layout for Blaskan.
Column Widths at Desktop
At the desktop breakpoint, the content area and sidebar share the available width. The exact column percentages are defined in assets/css/main.css. The content column takes the larger share; the sidebar is narrower.
The outer container has a maximum width that keeps line lengths in comfortable reading range on large monitors. On very wide displays (1400px+), the layout centers within the viewport with visible margin on both sides rather than expanding to fill the full screen.
What Collapses at the Tablet Breakpoint
The sidebar is the main structural element that changes at the tablet breakpoint. In a typical WordPress blog, the sidebar contains a widget area with secondary navigation, recent posts, categories, or search. At tablet width, this content moves below the main content column rather than appearing beside it. Readers encounter it after finishing the page content.
This is a deliberate reading-focused decision. Widths in the tablet range are not reliably wide enough to give the content column a comfortable line length while also rendering a sidebar at usable size. Collapsing the sidebar preserves reading measure at the cost of sidebar visibility.
If sidebar content is critical to navigation on your site, consider whether it belongs in the header navigation menu instead, where it remains visible at all widths.
Table Overflow Behavior
Data tables with many columns can exceed the viewport width at smaller sizes. Blaskan wraps tables in a scroll container so that wide tables scroll horizontally rather than breaking the page layout. A table that fits comfortably at desktop width may require horizontal scrolling at mobile size. This is expected behavior.
If your content includes data-heavy tables, test them at 375px to see how they behave. The table itself scrolls; the surrounding text does not.
Image Scaling
Images in post content scale fluidly. A 1200px wide image placed in the content editor renders at full column width at desktop and scales down proportionally at smaller sizes. WordPress's srcset and sizes attributes (set automatically when you upload images) help ensure the browser loads an appropriately sized file rather than downloading the largest version on mobile.
For featured images in archive listings, the same fluid scaling applies. The image occupies the full content column width at any breakpoint.
Responsive Behavior of Embedded Content
Iframes, embedded videos, and other non-native embeds require careful handling. Standard WordPress embeds (YouTube, Vimeo, etc.) are processed by the oEmbed system and wrapped in a responsive container. Custom iframes placed in post content should have width="100%" and an appropriate aspect ratio to scale correctly.
Testing Layout Behavior
The browser's responsive design tool (developer tools, typically toggled with F12 then the device toolbar icon) is the fastest way to inspect Blaskan at specific widths. Set the viewport to 375px, 640px, 768px, 960px, and 1280px to see the layout at each key point.
For a live preview of responsive behavior with representative content, see demo.blaskan.net. For accessibility implications of responsive layout decisions, see the accessibility overview.