Sophisticated Business: Fix overflowing centred image

This commit is contained in:
Takashi Irie 2019-05-10 23:02:52 +01:00
parent 164a54b704
commit 2e04c8ba23
4 changed files with 7 additions and 56 deletions

View file

@ -518,33 +518,12 @@
//! Image
.wp-block-image {
max-width: 100%;
img {
display: block;
}
.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

@ -114,7 +114,6 @@ div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedp
/**
* Blocks
*/
/* Mailchimp Block - Temp Fix */
.wp-block-jetpack-mailchimp input[type="email"] {
width: 100%;

View file

@ -3844,7 +3844,7 @@ body.page .main-navigation {
}
.entry .entry-content .wp-block-image {
max-width: 1000%;
max-width: 100%;
}
.entry .entry-content .wp-block-image img {
@ -3917,7 +3917,7 @@ body.page .main-navigation {
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2 {
font-family: "Poppins", -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: 700;
line-height: 1.25;
padding: 0;

View file

@ -3855,41 +3855,14 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-image {
max-width: 100%;
}
.entry .entry-content .wp-block-image img {
display: block;
}
@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));