Modern Business: Fix overflowing centred image

This commit is contained in:
Takashi Irie 2019-05-10 22:52:55 +01:00
parent a7c8a3b5c4
commit 164a54b704
4 changed files with 2 additions and 97 deletions

View file

@ -637,32 +637,6 @@
display: block; display: block;
} }
@include media(tablet) {
max-width: calc(6 * (100vw / 12) - 28px);
}
.aligncenter {
@include postContentMaxWidth();
@include media(tablet) {
margin: 0;
width: $size__site-tablet-content;
img {
margin: 0 auto;
}
}
@include media(desktop) {
width: $size__site-desktop-content;
img {
margin: 0 auto;
}
}
}
&.alignfull img { &.alignfull img {
width: 100vw; width: 100vw;
max-width: calc( 100% + (2 * #{$size__spacing-unit})); max-width: calc( 100% + (2 * #{$size__spacing-unit}));

View file

@ -77,7 +77,6 @@
/** /**
* Blocks * Blocks
*/ */
/* Mailchimp Block - Temp Fix */ /* Mailchimp Block - Temp Fix */
.wp-block-jetpack-mailchimp input[type="email"] { .wp-block-jetpack-mailchimp input[type="email"] {
width: 100%; width: 100%;

View file

@ -4010,37 +4010,6 @@ body.page .main-navigation {
} }
} }
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
margin: 0;
width: calc(8 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(6 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
.entry .entry-content .wp-block-image.alignfull img { .entry .entry-content .wp-block-image.alignfull img {
width: 100vw; width: 100vw;
max-width: calc( 100% + (2 * 1rem)); max-width: calc( 100% + (2 * 1rem));
@ -4057,7 +4026,7 @@ body.page .main-navigation {
.entry .entry-content .wp-block-cover-image, .entry .entry-content .wp-block-cover-image,
.entry .entry-content .wp-block-cover { .entry .entry-content .wp-block-cover {
position: relative; position: relative;
min-height: 510px; min-height: 430px;
padding: 1rem; padding: 1rem;
} }
@ -4075,7 +4044,7 @@ body.page .main-navigation {
.entry .entry-content .wp-block-cover .wp-block-cover-text { .entry .entry-content .wp-block-cover .wp-block-cover-text {
color: #fff; color: #fff;
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.25em; font-size: 1.6875em;
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
padding: 0; padding: 0;

View file

@ -4016,43 +4016,6 @@ body.page .main-navigation {
display: block; display: block;
} }
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
margin: 0;
width: calc(8 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(6 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
.entry .entry-content .wp-block-image.alignfull img { .entry .entry-content .wp-block-image.alignfull img {
width: 100vw; width: 100vw;
max-width: calc( 100% + (2 * 1rem)); max-width: calc( 100% + (2 * 1rem));