76 lines
1.8 KiB
CSS
76 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;
|
|||
|
|
}
|
|||
|
|
}
|