Responsive Content/Sidebar Media Query Styles

Pad?

When the "Pad?" option is selected your Content area's padding is adjusted in both the 3rd and 6th @media queries to help ensure a smooth "Responsive" transition as the browser/device size decreases. In some cases, however, these styles can get in the way of your own preferred Responsive functionality and therefore it's more ideal to leave this padding alone and allow the Dynamik Design Option settings and your own Custom CSS to have full control.

Pad Code:

3rd trigger point:

.content .override { padding: 10px 20px 0; }
6th trigger point:
.content .override { padding: 0; }<br>

Content/Sidebar "Default" Info:

@media query trigger points: 1st, 3rd & 6th
Effect of Default styles: 1st trigger point = The sidebars get pushed below the content, with both the main content and sidebars stretching to full width, enabling both Content and Sidebars ample room to display in any browser width. 3rd trigger point = Horizontal margins/padding gets added to elements inside the main content area to maintain nicely spaced out content. 6th trigger point = Content article and Breadcrumb horizontal margins/padding get removed to better accommodate smaller mobile devices.

Default Code:

1st trigger point:
body.override .content-sidebar-wrap, body.override .content { width: 100%; } body.override .site-inner { padding-bottom: 10px; } .content { padding: 0; } .content .override { padding: 0 10px; } body.override .breadcrumb { margin: 0 0 30px; } body.override .sidebar-primary, body.override .sidebar-secondary { width: 100%; float: left; } .sidebar-primary { margin: 20px 0 0; }
	
3rd trigger point:
body.override .breadcrumb { margin: 0 20px 20px; } .author-box { margin: 0px 20px 40px; } #comments { margin: 0px 20px 15px; } .entry-pings { margin: 0 20px; } #respond { margin: 0 20px 15px; }
	
6th trigger point:
body.override .content-sidebar-wrap, body.override .content { width: 100%; } body.override .site-inner { padding-bottom: 10px; } .content { padding: 0; } .content .override { padding: 0 10px; } body.override .breadcrumb { margin: 0 0 30px; } body.override .sidebar-primary, body.override .sidebar-secondary { width: 100%; float: left; } .sidebar-primary { margin: 20px 0 0; }
	

Content/Sidebar "Delayed" Info:

@media query trigger points: 2nd, 3rd, 4th & 6th
Effect of Delayed styles: 2nd trigger point = The Primary Sidebar gets resized to the "Progressive Sidebar Width" (set below) and remains next to the main content area allowing your full content to display on larger mobile devices. The Secondary Sidebar, if one exists, will be pushed below the main content area and set to a full width. 3rd trigger point = Horizontal margins/padding gets added to elements inside the main content area to maintain nicely spaced out content. 4th trigger point = The sidebars get pushed below the content, with both the main content and sidebars stretching to full width, enabling both Content and Sidebars ample room to display in any browser width. 6th trigger point = Content article and Breadcrumb horizontal margins/padding get removed to better accommodate smaller mobile devices.

Delayed Code:

2nd trigger point:
body.override .site-inner { padding-bottom: 10px; } body.override .content-sidebar-wrap { width: 100%; } body.override .content { width: auto; max-width: 100%; padding: 0; } .content .override { padding: 0 10px; } body.content-sidebar-sidebar .content, body.sidebar-content-sidebar .content, body.content-sidebar .content { margin-right: 300px; } body.sidebar-sidebar-content .content, body.sidebar-content .content { margin-left: 300px; } body.full-width-content .content { margin: 0; } body.override .breadcrumb { margin: 0 0 30px; } body.override .sidebar-primary { width: 280px; } body.content-sidebar-sidebar .sidebar-primary, body.sidebar-content-sidebar .sidebar-primary, body.content-sidebar .sidebar-primary { margin-left: -280px; } body.sidebar-sidebar-content .sidebar-primary, body.sidebar-content .sidebar-primary { margin-right: -280px; } body.override .sidebar-secondary { width: 100%; margin: 20px 0 0; float: left; }
	
3rd trigger point:
body.override .breadcrumb { margin: 0 20px 20px; } .author-box { margin: 0px 20px 40px; } #comments { margin: 0px 20px 15px; } .entry-pings { margin: 0 20px; } #respond { margin: 0 20px 15px; }
	
4th trigger point:
body.override .site-inner { padding-bottom: 10px; } body.override .content-sidebar-wrap, body.override .content { width: 100%; } .content { padding: 0; } .content .override { padding: 0 10px; } body.override .breadcrumb { margin: 0 0 30px; } body.override .sidebar-primary, body.override .sidebar-secondary { width: 100%; float: left; } .sidebar-primary { margin: 20px 0 0; }
	
6th trigger point:
body.override .breadcrumb { margin: 0 0 20px; }