9dba60cd48
git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2432631 b8457f37-d9ea-0310-8a92-e5e31aec5664
75 lines
1.8 KiB
CSS
75 lines
1.8 KiB
CSS
/**
|
||
* Basic responsive layout for the main element
|
||
*
|
||
* Based on Hello Elementor v2.3.0 Basic responsive layout
|
||
* themes/hello-elementor/theme.css:8..31
|
||
* licensed under GNU General Public License v3 or later
|
||
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
|
||
*
|
||
* Since v2.1.4 of Footnotes
|
||
*
|
||
* Last modified: 2020-12-06T1722+0100
|
||
*
|
||
* The enqueuing of this style sheet is optional and can be
|
||
* enabled in the Reference container settings.
|
||
**/
|
||
|
||
/***********************************************************
|
||
Rationale
|
||
|
||
In Hello Elementor Theme, this applies to .site-header, and
|
||
also to .site-main, which is a class of the <main> element,
|
||
at the condition that the page is not built with Elementor:
|
||
body:not([class*="elementor-page-"])
|
||
Therefore, in pages built with Elementor, proper layout is
|
||
applied only to features managed by Elementor, not others.
|
||
|
||
The Footnotes references container is near the end of main.
|
||
This style sheet lets Footnotes’ reference container come
|
||
into the benefit of the basic responsive layout style rules
|
||
that would apply if the page were not built with Elementor.
|
||
|
||
This is mainly useful with Hello Elementor, but it might be
|
||
used also with another theme.
|
||
*/
|
||
|
||
main, .main-content, .site-main {
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
|
||
main, .main-content, .site-main {
|
||
padding-right: 10px;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 576px) {
|
||
|
||
main, .main-content, .site-main {
|
||
max-width: 500px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
|
||
main, .main-content, .site-main {
|
||
max-width: 600px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
|
||
main, .main-content, .site-main {
|
||
max-width: 800px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
|
||
main, .main-content, .site-main {
|
||
max-width: 960px;
|
||
}
|
||
}
|