From c98060a2fab47b31d13313d39abd0b7f9192c83e Mon Sep 17 00:00:00 2001 From: Jen Breese Date: Wed, 7 Jul 2021 10:09:50 -0700 Subject: [PATCH] D8CORE-4225: clearing the floats if used in the wysiwyg for the medium and down breakpoint (#125) --- .../dist/css/component/paragraph/react_paragraphs.css | 2 +- .../scss/component/paragraph/react_paragraphs/_multirow.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/modules/stanford_profile_styles/dist/css/component/paragraph/react_paragraphs.css b/modules/stanford_profile_styles/dist/css/component/paragraph/react_paragraphs.css index 00f33a0f..810e03bb 100644 --- a/modules/stanford_profile_styles/dist/css/component/paragraph/react_paragraphs.css +++ b/modules/stanford_profile_styles/dist/css/component/paragraph/react_paragraphs.css @@ -1 +1 @@ -.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media only screen and (min-width:1500px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:100px;margin-left:100px}}@media only screen and (min-width:1200px) and (max-width:1499px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:100px;margin-left:100px}}@media only screen and (min-width:992px) and (max-width:1199px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:80px;margin-left:80px}}@media only screen and (min-width:768px) and (max-width:991px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:50px;margin-left:50px}}@media only screen and (min-width:576px) and (max-width:767px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:30px;margin-left:30px}}@media only screen and (min-width:0) and (max-width:575px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:20px;margin-left:20px}}@media (max-width:991px){.react-paragraphs-row.flex-container{display:block}.react-paragraphs-row.flex-container .paragraph-item{max-width:100%}}.react-paragraphs-row .ptype-stanford-media-caption .su-media .su-media__caption{max-width:100%}.react-paragraphs-row .su-card .su-card__contents{overflow-y:hidden}@media only screen and (min-width:992px) and (max-width:1199px){.react-paragraphs-row .flex-3-of-12 .su-hero .su-hero__card,.react-paragraphs-row .flex-4-of-12 .su-hero .su-hero__card,.react-paragraphs-row .flex-6-of-12 .su-hero .su-hero__card{left:0}}.react-paragraphs-row .flex-12-of-12{margin-right:auto;margin-left:auto}@media (max-width:991px){.react-paragraphs-row .flex-12-of-12 .flex-container{display:block}.react-paragraphs-row .flex-12-of-12 .flex-container>div{max-width:100%}.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:3.2rem}}@media only screen and (max-width:991px) and (min-width:768px){.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:4.5rem}}@media only screen and (max-width:991px) and (min-width:1500px){.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:4.8rem}} \ No newline at end of file +.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media only screen and (min-width:1500px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:100px;margin-left:100px}}@media only screen and (min-width:1200px) and (max-width:1499px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:100px;margin-left:100px}}@media only screen and (min-width:992px) and (max-width:1199px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:80px;margin-left:80px}}@media only screen and (min-width:768px) and (max-width:991px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:50px;margin-left:50px}}@media only screen and (min-width:576px) and (max-width:767px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:30px;margin-left:30px}}@media only screen and (min-width:0) and (max-width:575px){.jumpstart-ui--one-column .container-2-items,.jumpstart-ui--one-column .container-3-items{margin-right:20px;margin-left:20px}}.react-paragraphs-row.flex-container{clear:both}@media (max-width:991px){.react-paragraphs-row.flex-container{display:block}.react-paragraphs-row.flex-container .paragraph-item{max-width:100%}}.react-paragraphs-row .ptype-stanford-media-caption .su-media .su-media__caption{max-width:100%}.react-paragraphs-row .su-card .su-card__contents{overflow-y:hidden}@media only screen and (min-width:992px) and (max-width:1199px){.react-paragraphs-row .flex-3-of-12 .su-hero .su-hero__card,.react-paragraphs-row .flex-4-of-12 .su-hero .su-hero__card,.react-paragraphs-row .flex-6-of-12 .su-hero .su-hero__card{left:0}}.react-paragraphs-row .flex-12-of-12{margin-right:auto;margin-left:auto}@media (max-width:991px){.react-paragraphs-row .flex-12-of-12 .flex-container{display:block}.react-paragraphs-row .flex-12-of-12 .flex-container>div{max-width:100%}.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:3.2rem}}@media only screen and (max-width:991px) and (min-width:768px){.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:4.5rem}}@media only screen and (max-width:991px) and (min-width:1500px){.react-paragraphs-row .flex-12-of-12 .flex-container .ds-entity--stanford-event{padding-bottom:4.8rem}} \ No newline at end of file diff --git a/modules/stanford_profile_styles/lib/scss/component/paragraph/react_paragraphs/_multirow.scss b/modules/stanford_profile_styles/lib/scss/component/paragraph/react_paragraphs/_multirow.scss index 0349b9d8..836cd475 100644 --- a/modules/stanford_profile_styles/lib/scss/component/paragraph/react_paragraphs/_multirow.scss +++ b/modules/stanford_profile_styles/lib/scss/component/paragraph/react_paragraphs/_multirow.scss @@ -36,7 +36,10 @@ .react-paragraphs-row { // Single item per row on screens less than and equal to md. + // Added the clear for when media items are floated (right or left) within the wysiwyg. &.flex-container { + clear: both; + @include grid-media-max('md') { display: block;