diff --git a/CHANGELOG.md b/CHANGELOG.md
index e85cd49378..df6e02baff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 UNRELEASED
 ----------
 
+* [ [#1314](https://github.com/digitalfabrik/integreat-cms/issues/1314) ] Fix layout of media library on small screens
+
 
 2022.3.5
 --------
diff --git a/integreat_cms/static/src/js/media-management/component/edit-directory-sidebar.tsx b/integreat_cms/static/src/js/media-management/component/edit-directory-sidebar.tsx
index 87f3323e27..245864dd93 100644
--- a/integreat_cms/static/src/js/media-management/component/edit-directory-sidebar.tsx
+++ b/integreat_cms/static/src/js/media-management/component/edit-directory-sidebar.tsx
@@ -43,7 +43,7 @@ export default function EditDirectorySidebar({
 
   {
     return (
-      <div className="2xl:absolute w-full h-full flex flex-col rounded border border-blue-500 bg-white border-solid shadow-2xl">
+      <div className="absolute w-full h-full flex flex-col rounded border border-blue-500 bg-white border-solid shadow-2xl">
         <div class="rounded w-full p-4 bg-water-500 font-bold">
           <Sliders class="mr-1 inline-block h-5" />
           {mediaTranslations.heading_directory_properties}
diff --git a/integreat_cms/static/src/js/media-management/component/edit-sidebar.tsx b/integreat_cms/static/src/js/media-management/component/edit-sidebar.tsx
index df99c00789..ebe6d54f3a 100644
--- a/integreat_cms/static/src/js/media-management/component/edit-sidebar.tsx
+++ b/integreat_cms/static/src/js/media-management/component/edit-sidebar.tsx
@@ -86,7 +86,7 @@ export default function EditSidebar({
   }, [file]);
 
   return (
-    <div className="2xl:absolute w-full h-full flex flex-col rounded border border-blue-500 shadow-2xl bg-white">
+    <div className="absolute w-full h-full flex flex-col rounded border border-blue-500 shadow-2xl bg-white">
       <div class="rounded w-full p-4 bg-water-500 font-bold">
         <div class="flex flex-row justify-between">
           <span>
diff --git a/integreat_cms/static/src/js/media-management/library.tsx b/integreat_cms/static/src/js/media-management/library.tsx
index 834c420c48..3f380697c1 100644
--- a/integreat_cms/static/src/js/media-management/library.tsx
+++ b/integreat_cms/static/src/js/media-management/library.tsx
@@ -248,10 +248,10 @@ export default function Library({
           )}
         </div>
       )}
-      <div className="flex flex-1 flex-col-reverse relative lg:flex-row gap-4 mt-4">
+      <div className="flex flex-1 relative flex-row gap-4 mt-4">
         <div className="relative flex-1">
           <div
-            className="2xl:absolute w-full h-full flex flex-col bg-white border border-blue-500 shadow-2xl rounded"
+            className="absolute w-full h-full flex flex-col bg-white border border-blue-500 shadow-2xl rounded"
             onClick={() => setFileIndex(null)}
           >
             <div class="rounded w-full bg-water-500 font-bold">
@@ -277,7 +277,7 @@ export default function Library({
         </div>
 
         {fileIndex !== null ? (
-          <div className="relative w-full lg:w-96 2xl:w-120 ">
+          <div className="relative w-56 md:w-72 lg:w-96 2xl:w-120">
             <EditSidebar
               directory={directory}
               fileIndexState={[fileIndex, setFileIndex]}
@@ -295,7 +295,7 @@ export default function Library({
           </div>
         ) : (
           directory && (
-            <div className="relative w-full lg:w-96 2xl:w-120 ">
+            <div className="relative w-56 md:w-72 lg:w-96 2xl:w-120">
               <EditDirectorySidebar
                 directory={directory}
                 apiEndpoints={apiEndpoints}