From 08f6d6752d255c4a60455346d44ca4119e27f7a1 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Sun, 3 Sep 2023 12:08:13 +0300
Subject: [PATCH] Issue #3382843 by shweta__sharma, Gauravvvv, smustgrave:
 Olivero: RSS feed block is not placed as per design on smaller screen

---
 core/themes/olivero/css/components/feed.css      | 14 ++++++++++++++
 core/themes/olivero/css/components/feed.pcss.css | 10 ++++++++++
 2 files changed, 24 insertions(+)

diff --git a/core/themes/olivero/css/components/feed.css b/core/themes/olivero/css/components/feed.css
index 1fb0c963755..a0582022c30 100644
--- a/core/themes/olivero/css/components/feed.css
+++ b/core/themes/olivero/css/components/feed.css
@@ -22,6 +22,13 @@
   color: var(--color--primary-50);
 }
 
+@media (max-width: 75rem) {
+  .feed-icon {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+}
+
 .feed-icon__label {
   flex-shrink: 0;
   letter-spacing: 0.08em;
@@ -38,6 +45,7 @@
   height: var(--sp1-5);
   margin-inline-start: var(--sp0-5);
   color: var(--color--white);
+  border-radius: 2px;
   background-color: var(--color--primary-50);
 }
 
@@ -45,3 +53,9 @@
   vertical-align: top;
   fill: currentColor;
 }
+
+@media (max-width: 75rem) {
+  .feed-icon__icon {
+    margin-inline: 0 var(--sp0-5);
+  }
+}
diff --git a/core/themes/olivero/css/components/feed.pcss.css b/core/themes/olivero/css/components/feed.pcss.css
index 1229c7f8ef2..4b13c887326 100644
--- a/core/themes/olivero/css/components/feed.pcss.css
+++ b/core/themes/olivero/css/components/feed.pcss.css
@@ -14,6 +14,11 @@
   &:hover {
     color: var(--color--primary-50);
   }
+
+  @media (--max-nav) {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
 }
 
 .feed-icon__label {
@@ -32,10 +37,15 @@
   height: var(--sp1-5);
   margin-inline-start: var(--sp0-5);
   color: var(--color--white);
+  border-radius: 2px;
   background-color: var(--color--primary-50);
 
   & svg {
     vertical-align: top;
     fill: currentColor;
   }
+
+  @media (--max-nav) {
+    margin-inline: 0 var(--sp0-5);
+  }
 }