Skip to content

Commit

Permalink
Merge pull request #1313 from Automattic/fix/issue-1311
Browse files Browse the repository at this point in the history 
 Varia: Revise .alignfull logic on mobile to stretch to the edge of the viewport
  • Loading branch information
@allancole
allancole committed Aug 23, 2019
2 parents 44b3121 + 92cb1d4 commit ef1115e
Show file tree
Hide file tree
Showing 33 changed files with 1,482 additions and 572 deletions.
5 changes: 2 additions & 3 deletions alves/sass/_extra-child-theme.scss
View file
Expand Up @@ -355,7 +355,6 @@ blockquote p {
* 4. Footer & Footer Widgets
*/
.site-footer {
@extend %responsive-alignfull;
margin: 0 auto;
display: block;
padding-left: $spacing_horizontal;
Expand All @@ -372,7 +371,7 @@ blockquote p {

#footer-widgets {
border-bottom: 1px solid #{map-deep-get($config-global, "color", "border", "light")};
@extend %responsive-alignwide;
@extend %responsive-alignwide-nested;
display: flex;
flex-wrap: nowrap;
flex: 1 0 100%;
Expand All @@ -398,7 +397,7 @@ blockquote p {
}

#footer-info-wrapper {
@extend %responsive-alignwide;
@extend %responsive-alignwide-nested;
display: flex;
margin: 0 auto;
padding-top: ($baseline-unit * .75);
Expand Down
39 changes: 25 additions & 14 deletions alves/style-rtl.css
View file
Expand Up @@ -3181,92 +3181,103 @@ img#wpstats {
}
}

.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(100% + 256px);
max-width: calc(100% - 32px);
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(100% + 256px);
max-width: 100%;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(calc( 560px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(calc( 640px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .site-footer {
/* Letting the box-model do all the work here. */
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: -16px;
margin-left: -16px;
width: calc(100% + 32px);
/* Letting the box-model do most of the work here. */
}

@media only screen and (min-width: 560px) {
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: inherit;
margin-left: inherit;
width: inherit;
}
}

.entry-content > .alignright {
Expand Down
39 changes: 25 additions & 14 deletions alves/style.css
View file
Expand Up @@ -3212,92 +3212,103 @@ img#wpstats {
}
}

.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(100% + 256px);
max-width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
}

.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(100% + 256px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(calc( 560px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(calc( 640px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}

.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .site-footer {
/* Letting the box-model do all the work here. */
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: -16px;
margin-right: -16px;
width: calc(100% + 32px);
/* Letting the box-model do most of the work here. */
}

@media only screen and (min-width: 560px) {
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: inherit;
margin-right: inherit;
width: inherit;
}
}

.entry-content > .alignright {
Expand Down

0 comments on commit ef1115e

Please sign in to comment.