Skip to content

Responsive CSS

Resources

GrowthZone Responsive

All GrowthZone module pages are responsive by default. They will be fully responsive as long as the template page being used to wrap the modules is responsive as well.

CM/MZ Modules

With our latest public web module release (version3), the CM/MZ content can be easily integrated into a responsive web design. They were built with a flexible width that displays properly down to a width of 480px – without content alignment issues. However, we have also created a set of default responsive rules that you can either enable via the Appearance tab within the Integration Settings Control Panel by navigating to the “Appearance” tab, then scrolling down and under “Use Responsive CSS” check “yes,” or copy/paste and use as a starting point to add to your own style sheets.

Because the CM/MZ module content is typically placed within the main content area of a website, these rules only apply to our content and only need to take affect when the main content area is beneath 480px. However, the rules do honor a default breakpoint of 640px which is Google’s recommendation and is also the width of the current iPhone model (portrait orientation). Note that the breakpoint is variable and can be adjusted to fit your specific context.

/*Responsive ruleset for ChamberMaster Modules. */
@media screen and (max-width: 640px) {
#mn-content {
  font-size:120%
}
#mn-content #mn-directory-list #mn-search-keyword input.mn-form-text, #mn-content .mn-subcats li, #mn-content .mn-listing-main, #mn-content .mn-listing-side, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-publicsubmit, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-print, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-print-all, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-contact, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-action-print, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-contact, #mn-content div.mn-results-found .mn-results-viewmap, #mn-content .mn-results-sort-section div.mn-actions ul li.mn-sort-upcomingrss, #mn-content .mn-results-found .mn-new-search, #mn-content .mn-results-found .mn-resultsfullcalendar, #mn-content .mn-listing-side, #mn-content #mn-pagetitle, #mn-content .mn-dealsbuttons, #mn-content div.mn-results-links li, #mn-content div.mn-results-links li a, #mn-content div.mn-results-links li.mn-phone, #mn-content div.mn-results-links li.mn-phone2, #mn-content ul, .mn-reset ul, #mn-content ol, .mn-reset ol, #mn-content .mn-member-sidebar, #mn-content #mn-member-tab-content-container, #mn-content .mn-tabs li, #mn-content .mn-actions-share ul, #mn-content .mn-listing-infobasic, #mn-content .mn-listing-sidebar, #mn-info-country select, #mn-info-request input.mn-form-text, #mn-info-city, #mn-info-state, #mn-info-zip, #mn-content .mn-form-text, .mn-reset .mn-form-text, #mn-content .mn-form-dropdown, .mn-reset .mn-form-dropdown, #mn-content .mn-form-field, #mn-content .mn-filter-section .mn-form-field select, #mn-content .mn-filter-section .mn-form-field input {
  display:inline-block;
  width:100%;
  clear:both;
  margin-left:0;
  float:none;
  padding:0;
  box-sizing:border-box;
}
#mn-content .mn-listing-infobasic {
  min-width:100%;
  width:100%;
}
#mn-content .mn-member-sidebar {
  text-align:center;
}
#mn-content .mn-memberinfo-block-actions, #mn-content .mn-member-logo {
  float:none;
}
#mn-cal-actions span {
  margin-left: 0;
  display: block;
  float: none !important;
}
#mn-content .mn-cal-grid {
  width: 99%;
  margin-left: 1px;
}
#mn-content .mn-cal-day ul {
  display: none;
}
#mn-content .mn-cal-days {
  font-size:100%;
  padding: 7px 5px;
}
#mn-content .mn-cal-days a {
  text-decoration:underline;
}
#mn-content .mn-cal-rows {
  min-height:30px;
  height: 30px;
}
#mn-content .mn-event-reminder .mn-form-row {
  box-sizing:border-box;
}
#mn-content #mn-search-geoip select, #mn-content #mn-search-geoip input {
  margin: 0 3px 5px;
}
#mn-content input[type="text"], #mn-content input[type="password"], #mn-content select {
  padding:3px;
}
#mn-content .mn-subcats a {
  display: block;
}
#mn-content .mn-subcats li {
  background-color: #efefef;
  box-sizing:border-box;
  float: left;
  list-style: none outside none;
  margin: 5px 0;
  padding: 5px;
  width: 100%;
}
#mn-content .mn-subcats li.mn-subcats-more a {
  border: 1px solid;
  border-radius: 10px;
  padding: 3px;
  display: inline-block;
  margin-top: 10px;
}
#mn-content #mn-alphanumeric {
  margin: 20px auto;
  text-align: center;
}
#mn-content #mn-alphanumeric a {
  margin:3px;
  background-color:#ccc;
  display:inline-block;
  min-width:30px;
  padding:5px 3px;
}
#mn-content img {
  width:auto;
  height:auto;
  max-width:100%;
}
#mn-content #mn-banner {
  width:100% !important;
}
#mn-content .mn-ads-loaded > * {
  width:100%;
}
#mn-content .mn-ad-image img {
  width:100%;
  height:auto;
}
}
Scroll To Top