94 lines
1.8 KiB
CSS
94 lines
1.8 KiB
CSS
/*<?php for docblocks
|
||
/**
|
||
* 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 for v2.2.4
|
||
*
|
||
* The enqueuing of this stylesheet 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.
|
||
|
||
Footnotes reference containers are near the bottom of main.
|
||
This stylesheet lets Footnotes’ reference containers 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 may help
|
||
fix also other themes like Twenty Twenty-One for display in
|
||
older browsers not yet supporting CSS variables.
|
||
*/
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 576px) {
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
max-width: 500px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
max-width: 600px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
max-width: 800px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
|
||
main,
|
||
.main-content,
|
||
.site-main,
|
||
div.hentry {
|
||
max-width: 960px;
|
||
}
|
||
}
|