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;
}
@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 {
width: 100vw;
max-width: calc( 100% + (2 * #{$size__spacing-unit}));

View file

@ -77,7 +77,6 @@
/**
* Blocks
*/
/* Mailchimp Block - Temp Fix */
.wp-block-jetpack-mailchimp input[type="email"] {
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 {
width: 100vw;
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 {
position: relative;
min-height: 510px;
min-height: 430px;
padding: 1rem;
}
@ -4075,7 +4044,7 @@ body.page .main-navigation {
.entry .entry-content .wp-block-cover .wp-block-cover-text {
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-size: 2.25em;
font-size: 1.6875em;
font-weight: 300;
line-height: 1.25;
padding: 0;

View file

@ -4016,43 +4016,6 @@ body.page .main-navigation {
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 {
width: 100vw;
max-width: calc( 100% + (2 * 1rem));