Adds min heigth and background color to headers so that image loading state doesn't break the layout.

This commit is contained in:
mateuswetah 2020-04-29 18:29:01 -03:00
parent e08c107199
commit fe6ffc9409
5 changed files with 6 additions and 1 deletions

View File

@ -38,6 +38,7 @@
// use 1526px - 1 column - 1 column; // use 1526px - 1 column - 1 column;
.wp-block-image.alignwide>img { .wp-block-image.alignwide>img {
max-width: 1400px !important; max-width: 1400px !important;
width: calc(100% - 12.5%) !important;
width: calc(100vw - 12.5vw) !important; width: calc(100vw - 12.5vw) !important;
padding: 0 !important; padding: 0 !important;
left: 0px; left: 0px;

View File

@ -32,6 +32,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-color: #f2f2f2;
@media only screen and (min-width: 641px) and (max-width: 992px) { @media only screen and (min-width: 641px) and (max-width: 992px) {
height: 37.5%; height: 37.5%;

View File

@ -26,6 +26,7 @@
max-width: 215px; max-width: 215px;
bottom: -111px; // 215px/2 + 4px bottom: -111px; // 215px/2 + 4px
border-width: 4px !important; border-width: 4px !important;
background-color: #f2f2f2;
// Above this point, the container should not be larger // Above this point, the container should not be larger
// 1400px is the maximum the inner cointainer should get, so we // 1400px is the maximum the inner cointainer should get, so we

View File

@ -738,6 +738,8 @@ nav{
margin: 0 auto; margin: 0 auto;
object-fit: cover; object-fit: cover;
display: block; display: block;
min-height: 140px; // Important when loading img source file.
background-color: #f2f2f2;
} }
.page-header.page-header--image-full { .page-header.page-header--image-full {
height: auto; height: auto;

File diff suppressed because one or more lines are too long