diff --git a/client/blocks/conversations/list.scss b/client/blocks/conversations/list.scss index b971790771474..830a1a5db272a 100644 --- a/client/blocks/conversations/list.scss +++ b/client/blocks/conversations/list.scss @@ -1,5 +1,9 @@ .conversations__comment-list { cursor: initial; // override style from .card.is-clickable + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .conversations__comment-list-ul { diff --git a/client/blocks/reader-feed-header/style.scss b/client/blocks/reader-feed-header/style.scss index 2c01950285a52..33e8f139fee06 100644 --- a/client/blocks/reader-feed-header/style.scss +++ b/client/blocks/reader-feed-header/style.scss @@ -2,6 +2,10 @@ display: flex; margin-bottom: 16px; z-index: z-index(".reader-feed-header", ".reader-feed-header__site"); + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px 16px; + } } .reader-feed-header.is-wide-display .reader-feed-header__site { diff --git a/client/blocks/reader-post-card/style.scss b/client/blocks/reader-post-card/style.scss index d0b24e5af76c9..5fa37e50da608 100644 --- a/client/blocks/reader-post-card/style.scss +++ b/client/blocks/reader-post-card/style.scss @@ -29,7 +29,7 @@ } .reader-post-card.card { - border-bottom: 5px solid var(--color-neutral-0); + border-bottom: 5px solid var(--color-neutral-5); border-radius: 6px; /* stylelint-disable-line scales/radii */ box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset; margin: 0; @@ -156,6 +156,10 @@ .reader-post-card__post { display: inherit; margin: 0; + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .reader-post-card__post-heading { @@ -253,6 +257,10 @@ .comments__form { margin-top: 0; } + + @include breakpoint-deprecated( "<660px" ) { + margin: 24px 16px 0 16px; + } } } @@ -289,6 +297,11 @@ border-top: none; margin: 20px 0 0 10px; padding-top: 0; + + @include breakpoint-deprecated( "<660px" ) { + margin: 20px 0 0 16px; + width: calc(100% - 32px); + } } } @@ -358,6 +371,10 @@ .reader-post-card__byline { display: flex; font-size: $font-body-small; + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .reader-post-card__author::after { @@ -531,7 +548,7 @@ @include breakpoint-deprecated( "<660px" ) { .reader-post-card__post { - margin-left: 0; + margin: 0 16px; } } diff --git a/client/reader/discover/discover-navigation.scss b/client/reader/discover/discover-navigation.scss index 77f672d9bf6b3..1cf17bd45b692 100644 --- a/client/reader/discover/discover-navigation.scss +++ b/client/reader/discover/discover-navigation.scss @@ -4,9 +4,6 @@ &.reader-dual-column { max-width: 968px; // Max width of dual column reader stream. } - @media only screen and (max-width: 660px) { - padding: 30px 0 0 30px; - } } .discover-stream-navigation { @@ -21,7 +18,7 @@ margin-bottom: 0; } @media only screen and (max-width: 660px) { - margin: 0 30px -24px; + margin: 0 16px -24px; } .discover-stream-navigation__left-button-wrapper, diff --git a/client/reader/following/style.scss b/client/reader/following/style.scss index 68b4297e320fe..525ae270d56e3 100644 --- a/client/reader/following/style.scss +++ b/client/reader/following/style.scss @@ -11,6 +11,7 @@ } @media (max-width: 660px) { + margin: 0 16px; .navigation-header__main { min-height: auto; } diff --git a/client/reader/list-stream/style.scss b/client/reader/list-stream/style.scss index f8a7e32d0e9a3..3073bc85d0f03 100644 --- a/client/reader/list-stream/style.scss +++ b/client/reader/list-stream/style.scss @@ -20,6 +20,10 @@ .navigation-header { margin: 0 auto; padding: 0 0 16px 0; + + @include breakpoint-deprecated( "<660px" ) { + padding: 0 16px 16px; + } } } diff --git a/client/reader/search-stream/index.jsx b/client/reader/search-stream/index.jsx index d9147b955fc75..97535cf072c3d 100644 --- a/client/reader/search-stream/index.jsx +++ b/client/reader/search-stream/index.jsx @@ -173,11 +173,7 @@ class SearchStream extends React.Component { return (