background-size: 100%

src/containers/Homepage/About.tsx

@@ -2,6 +2,7 @@ import { Box, Grid } from '@mui/material';
 import { ReactNode } from 'react';
 import Faqs from './FAQs';
 import { Item } from './CurrentProjects';
+import './about.scss';
 
 function WJLogo(): JSX.Element {
   return (
@@ -104,9 +105,10 @@ function AboutUs(): JSX.Element {
                 >
                   <HomepageIntro />
                 </GridItem>
-                <GridItem order={{
-                  xs: 1, sm: 1, md: 1, lg: 2, xl: 2,
-                }}
+                <GridItem
+                  order={{
+                    xs: 1, sm: 1, md: 1, lg: 2, xl: 2,
+                  }}
                 >
                   <WJLogo />
                 </GridItem>

src/containers/Homepage/about.scss

@@ -0,0 +1 @@
+.css-otmogo {padding: 0px !important}

src/containers/Songs/MusicPlayer/index.tsx

@@ -39,6 +39,7 @@ export function MyReactPlayer(props: ImyReactPlayerProps): JSX.Element {
       height="40vh"
       id="mainPlayer"
       className="audio"
+      backgroundSize="cover"
       config={{ youtube: { playerVars: { controls: 0 } }, file: { attributes: { controlsList: 'nodownload' } } }}
     />
   );
@@ -53,50 +54,54 @@ export function MyButtons(props: ImyButtonsProps): JSX.Element {
     playing, setPlaying, index, songsState, setIndex, isSingle,
   } = props;
   return (
-    <div style={{ paddingTop: 0, margin: 'auto' }}>
-      <div id="play-buttons">
-        <Button
-          size="small"
-          variant="contained"
-          id="play-pause"
-          className={playing ? 'on' : 'off'}
-          onClick={() => utils.play(playing, setPlaying)}
-        >
-          Play/Pause
-        </Button>
-        {!isSingle ? null : (
+    <>
+      <div style={{ paddingTop: 0, margin: 'auto' }}>
+        <div id="play-buttons">
           <Button
             size="small"
-            variant="outlined"
-            id="home"
-            onClick={() => window.open('https://web-jam.com/music/songs', '_blank')}
+            variant="contained"
+            id="play-pause"
+            className={playing ? 'on' : 'off'}
+            onClick={() => utils.play(playing, setPlaying)}
           >
-            More Songs
+            Play/Pause
           </Button>
-        )}
-        {isSingle ? null
-          : (
-            <>
-              <Button
-                size="small"
-                variant="outlined"
-                id="next"
-                onClick={() => utils.next(index, songsState, setIndex)}
-              >
-                Next
-              </Button>
-              <Button
-                size="small"
-                variant="outlined"
-                id="prev"
-                onClick={() => utils.prev(index, songsState, setIndex)}
-              >
-                Prev
-              </Button>
-            </>
+          {!isSingle ? null : (
+            <Button
+              size="small"
+              variant="outlined"
+              id="home"
+              onClick={() => window.open('https://web-jam.com/music/songs', '_blank')}
+            >
+              More Songs
+            </Button>
           )}
+          {isSingle ? null
+            : (
+              <>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  id="prev"
+                  onClick={() => utils.prev(index, songsState, setIndex)}
+                >
+                  Prev
+                </Button>
+
+                <Button
+                  size="small"
+                  variant="outlined"
+                  id="next"
+                  onClick={() => utils.next(index, songsState, setIndex)}
+                >
+                  Next
+                </Button>
+              </>
+            )}
+        </div>
       </div>
-    </div>
+      <hr className="horizontal-line" />
+    </>
   );
 }
 

src/containers/Songs/MusicPlayer/musicPlayer.scss

@@ -1,16 +1,25 @@
 .textUnderPlayer{
+    margin-top: 0px;
     padding-bottom: 0px;
     margin:auto;
 }
 
+.horizontal-line{
+    margin-top: 15px;
+    margin-bottom: 3px;
+    background-color: rgb(120, 36, 199);
+
+}
+
 .songPlayerButtonsSection{
     margin:auto;
 }
 
-
 #play-pause.on { background-color: red; color: black; }
 
-#play-buttons { margin-bottom:10px;}
+#play-buttons { margin-bottom:-10px; 
+                margin-top:-5px;
+}
 
 .categoryButtons {
     height: 22px; margin: auto; padding-top: 10px;

src/containers/Songs/MusicPlayer/utils.tsx

@@ -4,11 +4,11 @@ import type { Isong } from 'src/providers/Data.provider';
 
 function setPlayerStyle(song: Isong): Record<string, unknown> {
   let playerStyle = {
-    backgroundColor: '#2a2a2a',
+    backgroundColor: 'white',
     textAlign: 'center',
     backgroundImage: song.image ? `url(${song.image})` : '',
     backgroundPosition: 'center',
-    backgroundSize: '80%',
+    backgroundSize: '100%',
     backgroundRepeat: 'no-repeat',
   };
   if (song.image === undefined || song.image === '') {

static/_slideshow.scss

@@ -11,7 +11,7 @@
   max-width: 1000px;
   position: relative;
   margin: auto;
-  max-height: 450px;
+  background-size: cover;
 }
 
 #libslideshow img,
@@ -24,28 +24,37 @@
 #lSlide1 img,
 #lSlide2 img {
   width: 100%;
+  max-height: 100%;
+  background-size: cover;
+
 }
 
 .slideshow {
   padding: 0 0 15px !important;
+  background-size: cover;
 }
 
 .music-slideshow {
   width: 100% !important;
   height: 0 !important;
   padding-bottom: 38%;
+  object-fit: fill;
+  background-size: cover;
 }
 
 .home-slideshow {
   width: 100% !important;
   height: 0 !important;
   padding-bottom: 50%;
   margin-top: -15px;
+  background-size: cover;
 }
 
 .slideshowimage {
   width: 100%;
   height: 0;
+  max-height: 100%;
+  background-size: cover;
 }
 
 .spaceUnderSlideShow {
@@ -55,12 +64,14 @@
 .sidebar-image {
   width: 180px;
   border: 0;
+  background-size: cover;
 }
 
 .slide-images {
   width: 100%;
-  max-height:390px;
+  max-height:100%;
   background-color: black;
-  object-fit: contain;
+  object-fit: fill;
   background-repeat: space;
+  background-size: cover;
 }