multipurpose_corporate_theme.responsive.styles.css in Multipurpose Corporate Profile 7
/*
* responsive.custom.css is for custom media queries that are not set via the
* theme settings, such as cascading media queries.
*
* By default all the other responsive stylesheets used in Adaptivetheme use a
* "stacking method", however cascading media queries use a waterfall method so
* you can leverage the cascade and inheritance for all browsers that support
* media queries.
*
* @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
*
* NOTE: this file loads by default, to disable go to your theme settings and
* look under the "CSS" settings tab.
*/
/*
* Really small screens and up
*/
/* @media only screen and (min-width: 220px) {} */
/*
* Smalltouch sizes and up
*/
/* @media only screen and (min-width: 320px) {} */
/*
* Smalltouch sizes and down
*/
@media only screen and (max-width: 480px) {
/*
* Float Region Blocks - custom media query CSS example:
*
* Float regions blocks is an Extension you can enable in the appearance
* settings for your theme. This feature allows you to automatically float
* blocks in regions, you can switch it on and off depending on your
* requirements. For design purposes you many want to remove the floats for
* devices where the entire theme is just one column - for example small
* mobile phones. The following CSS is inside the custom media query:
*
* @media only screen and (max-width: 480px){}
*
* This will target devices with a maximum width of 480px - most small phones.
* In these smaller screen sizes we can remove the float and widths so all
* blocks stack instead of displaying horizonally. The selector used is an
* "attribute selector" which will match on any float block class. Use your
* inspector or Firebug to get the classes from the page output if you need
* more granular control over block alignment and stacking.
*/
.region[class*="float-blocks"] .block {
float: none;
width: 100%;
}
}
/*
* Tablet sizes and up
*/
/* @media only screen and (min-width: 768px) {} */
/*
* Desktops/laptops and up
*/
/* @media only screen and (min-width: 1025px) {} */
@media only screen and (max-width:320px) {
/*
* Important Information about this CSS File
*
* - Do not delete or rename this file, if you do not use it leave it blank (delete
* everything) and the file will be skipped when you enable Production Mode in
* the Global theme settings.
*
* - Read the _README file in this directory, it contains useful help and other information.
*/
/* Increase the default font size on small touch devices */
body {
font-size: 100%;
}
/* =============================================================================
* Mobile Menu Toggle
* See your theme settings extensions for how to enable the menu toggle.
* These are example styles for the menu toggle menu, you can use these in the
* relevant responsive stylesheets as required. Modify to suit your design.
* ========================================================================== */
/* The toggle link */
.at-mt .at-menu-toggle h2 {
margin-bottom: 5px;
}
.at-mt .at-menu-toggle h2 a {
background: #eee;
border: 2px solid #ccc;
padding: 2px 10px;
}
/* Menu items */
.at-mt .at-menu-toggle ul.menu li a {
background: #eee;
border-bottom: 1px solid #fff;
}
}
@media only screen and (min-width:321px) and (max-width:580px) {
/*
* Important Information about this CSS File
*
* - Do not delete or rename this file, if you do not use it leave it blank (delete
* everything) and the file will be skipped when you enable Production Mode in
* the Global theme settings.
*
* - Read the _README file in this directory, it contains useful help and other information.
*/
/* Increase the body font size on small touch devices */
body {
font-size: 100%;
}
/* =============================================================================
* Mobile Menu Toggle
* See your theme settings extensions for how to enable the menu toggle.
* These are example styles for the menu toggle menu, you can use these in the
* relevant responsive stylesheets as required. Modify to suit your design.
* ========================================================================== */
/* The toggle link */
.at-mt .at-menu-toggle h2 {
margin-bottom: 5px;
}
.at-mt .at-menu-toggle h2 a {
background: #eee;
border: 2px solid #ccc;
padding: 2px 10px;
}
/* Menu items */
.at-mt .at-menu-toggle ul.menu li a {
background: #eee;
border-bottom: 1px solid #fff;
}
}
@media only screen and (min-width:581px) and (max-width:768px) {
/*
* Important Information about this CSS File
*
* - Do not delete or rename this file, if you do not use it leave it blank (delete
* everything) and the file will be skipped when you enable Production Mode in
* the Global theme settings.
*
* - Read the _README file in this directory, it contains useful help and other information.
*/
/* Increase the body font size on tablet devices */
body {
font-size: 93.8%;
}
}
@media only screen and (min-width:769px) and (max-width:1024px) {
/*
* Important Information about this CSS File
*
* - Do not delete or rename this file, if you do not use it leave it blank (delete
* everything) and the file will be skipped when you enable Production Mode in
* the Global theme settings.
*
* - Read the _README file in this directory, it contains useful help and other information.
*/
/* Increase the body font size on tablet devices */
body {
font-size: 93.8%;
}
}
@media only screen and (min-width:1025px) {
/*
* Important Information about this CSS File
*
* - Do not delete or rename this file, if you do not use it leave it blank (delete
* everything) and the file will be skipped when you enable Production Mode in
* the Global theme settings.
*
* - Read the _README file in this directory, it contains useful help and other information.
*/
}
File
node_export_assets/adaptivetheme/multipurpose_corporate_theme_files/multipurpose_corporate_theme.responsive.styles.css
View source
- /*
- * responsive.custom.css is for custom media queries that are not set via the
- * theme settings, such as cascading media queries.
- *
- * By default all the other responsive stylesheets used in Adaptivetheme use a
- * "stacking method", however cascading media queries use a waterfall method so
- * you can leverage the cascade and inheritance for all browsers that support
- * media queries.
- *
- * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
- *
- * NOTE: this file loads by default, to disable go to your theme settings and
- * look under the "CSS" settings tab.
- */
-
- /*
- * Really small screens and up
- */
- /* @media only screen and (min-width: 220px) {} */
-
- /*
- * Smalltouch sizes and up
- */
- /* @media only screen and (min-width: 320px) {} */
-
- /*
- * Smalltouch sizes and down
- */
- @media only screen and (max-width: 480px) {
- /*
- * Float Region Blocks - custom media query CSS example:
- *
- * Float regions blocks is an Extension you can enable in the appearance
- * settings for your theme. This feature allows you to automatically float
- * blocks in regions, you can switch it on and off depending on your
- * requirements. For design purposes you many want to remove the floats for
- * devices where the entire theme is just one column - for example small
- * mobile phones. The following CSS is inside the custom media query:
- *
- * @media only screen and (max-width: 480px){}
- *
- * This will target devices with a maximum width of 480px - most small phones.
- * In these smaller screen sizes we can remove the float and widths so all
- * blocks stack instead of displaying horizonally. The selector used is an
- * "attribute selector" which will match on any float block class. Use your
- * inspector or Firebug to get the classes from the page output if you need
- * more granular control over block alignment and stacking.
- */
- .region[class*="float-blocks"] .block {
- float: none;
- width: 100%;
- }
- }
-
- /*
- * Tablet sizes and up
- */
- /* @media only screen and (min-width: 768px) {} */
-
- /*
- * Desktops/laptops and up
- */
- /* @media only screen and (min-width: 1025px) {} */
-
-
- @media only screen and (max-width:320px) {
- /*
- * Important Information about this CSS File
- *
- * - Do not delete or rename this file, if you do not use it leave it blank (delete
- * everything) and the file will be skipped when you enable Production Mode in
- * the Global theme settings.
- *
- * - Read the _README file in this directory, it contains useful help and other information.
- */
-
- /* Increase the default font size on small touch devices */
- body {
- font-size: 100%;
- }
-
- /* =============================================================================
- * Mobile Menu Toggle
- * See your theme settings extensions for how to enable the menu toggle.
- * These are example styles for the menu toggle menu, you can use these in the
- * relevant responsive stylesheets as required. Modify to suit your design.
- * ========================================================================== */
- /* The toggle link */
- .at-mt .at-menu-toggle h2 {
- margin-bottom: 5px;
- }
-
- .at-mt .at-menu-toggle h2 a {
- background: #eee;
- border: 2px solid #ccc;
- padding: 2px 10px;
- }
-
- /* Menu items */
- .at-mt .at-menu-toggle ul.menu li a {
- background: #eee;
- border-bottom: 1px solid #fff;
- }
-
- }
- @media only screen and (min-width:321px) and (max-width:580px) {
- /*
- * Important Information about this CSS File
- *
- * - Do not delete or rename this file, if you do not use it leave it blank (delete
- * everything) and the file will be skipped when you enable Production Mode in
- * the Global theme settings.
- *
- * - Read the _README file in this directory, it contains useful help and other information.
- */
-
- /* Increase the body font size on small touch devices */
- body {
- font-size: 100%;
- }
-
- /* =============================================================================
- * Mobile Menu Toggle
- * See your theme settings extensions for how to enable the menu toggle.
- * These are example styles for the menu toggle menu, you can use these in the
- * relevant responsive stylesheets as required. Modify to suit your design.
- * ========================================================================== */
- /* The toggle link */
- .at-mt .at-menu-toggle h2 {
- margin-bottom: 5px;
- }
-
- .at-mt .at-menu-toggle h2 a {
- background: #eee;
- border: 2px solid #ccc;
- padding: 2px 10px;
- }
-
- /* Menu items */
- .at-mt .at-menu-toggle ul.menu li a {
- background: #eee;
- border-bottom: 1px solid #fff;
- }
-
- }
- @media only screen and (min-width:581px) and (max-width:768px) {
- /*
- * Important Information about this CSS File
- *
- * - Do not delete or rename this file, if you do not use it leave it blank (delete
- * everything) and the file will be skipped when you enable Production Mode in
- * the Global theme settings.
- *
- * - Read the _README file in this directory, it contains useful help and other information.
- */
-
- /* Increase the body font size on tablet devices */
- body {
- font-size: 93.8%;
- }
-
- }
- @media only screen and (min-width:769px) and (max-width:1024px) {
- /*
- * Important Information about this CSS File
- *
- * - Do not delete or rename this file, if you do not use it leave it blank (delete
- * everything) and the file will be skipped when you enable Production Mode in
- * the Global theme settings.
- *
- * - Read the _README file in this directory, it contains useful help and other information.
- */
-
- /* Increase the body font size on tablet devices */
- body {
- font-size: 93.8%;
- }
-
- }
- @media only screen and (min-width:1025px) {
- /*
- * Important Information about this CSS File
- *
- * - Do not delete or rename this file, if you do not use it leave it blank (delete
- * everything) and the file will be skipped when you enable Production Mode in
- * the Global theme settings.
- *
- * - Read the _README file in this directory, it contains useful help and other information.
- */
-
- }